/* Get Found > Ads: the header, the Report / Marketing switch and the Report
   view (ads/page.tsx and its report components) in the new Dashboard design
   (10/06). Loaded after skin/get-found-seo.css. Light rules first, their dark
   twins under [data-theme-root].dark.

   Owner, 10/06: "the ads tab still needs a complete rework it still uses the
   old design lets re design it with our new design style remember no ai slop
   text. hover info modals. tab selector needs to be new style like we are
   using in the other tabs, new style containers, font types and font sizes".

   Owner, 10/07: "this tab needs improving in the charts. they are small and
   hard to read, also i still see a lot of ai slop text that is over
   explaining, this explanations should be on the hover info modal, no need
   for ai slop pills and stuff like that ... take a look at that small font.
   that isnt even our new design font nor font sizes".

   What it is. The page body wears the shared root (.yw-get-found-page, from
   skin/money.css and skin/overview.css: Geist, the warm palette); these rules
   add the Ads pieces and are scoped to .yw-ads-page, except the hover panels,
   which portal to the theme root (.hw-info-body .yw-ads-*). The Report reads
   top to bottom: the hero (a third of the row: spend, its rows, cost per
   booking on a target track) beside the chart (two thirds: revenue and spend
   on two panels sharing the dates) with what Google Analytics saw in one row
   under it; the platforms table; the campaigns grid and table; the mix beside
   where bookings came from; the click hours; verification beside the proof.
   The bar is Pricing > Competitors (skin/pricing-compset.css): figures in ink,
   colour only where it means something, every sentence in a hover, figures
   and moves in the house chip on hover with the house motion. Type, measured
   in the browser: Geist everywhere; content 13px and up, table cells 14px,
   figures 15px and up; column heads, axis labels and micro labels 12px;
   nothing under 12px. */

/* ------------------------------------------------------------ layout -- */
.yw-ads-page .yw-ads-report { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.yw-ads-page .yw-ads-report > * { margin: 0; }
/* The top row: the hero a third, the chart column two thirds. */
.yw-ads-page .yw-ads-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: stretch; }
.yw-ads-page .yw-ads-top > * { min-width: 0; margin: 0; }
.yw-ads-page .yw-ads-chart-col { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.yw-ads-page .yw-ads-chart-col > * { margin: 0; }
.yw-ads-page .yw-ads-chart-col > .yw-ads-trend { flex: 1 1 auto; }
.yw-ads-page .yw-ads-more,
.yw-ads-page .yw-ads-stack { display: flex; flex-direction: column; gap: 16px; }
.yw-ads-page .yw-ads-more > *, .yw-ads-page .yw-ads-stack > * { margin: 0; }
/* Two cards share a row and end level; one alone spans it. */
.yw-ads-page .yw-ads-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.yw-ads-page .yw-ads-pair > * { min-width: 0; margin: 0; }
.yw-ads-page .yw-ads-pair:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.yw-ads-page .yw-ads-slot { display: flex; min-width: 0; flex-direction: column; }
.yw-ads-page .yw-ads-slot > .yw-card { flex: 1 1 auto; }
/* Every Ads card is a column, so its list or chart takes the room and its
   foot sits at the bottom. */
.yw-ads-page .yw-ads-card, .yw-ads-page .yw-ads-hero { display: flex; min-width: 0; flex-direction: column; }
.yw-ads-page .yw-ads-card .yw-card-head { align-items: center; }
.yw-ads-page .yw-card-title .hw-info-label { font-weight: 500; text-align: left; }
.yw-ads-page .yw-ads-head-right { display: inline-flex; flex-shrink: 0; align-items: center; gap: 12px; }
.yw-ads-page .yw-ads-head-count { flex-shrink: 0; color: #87818c; font-size: 15px; font-weight: 500; }
.yw-ads-page .yw-ads-card-line { margin: 14px 0 0; }
.yw-ads-page .yw-ads-card-state { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; margin-top: 14px; }
.yw-ads-page .yw-ads-empty-card .yw-card-head { align-items: center; }

/* ---------------------------------------------- words, pills, moves -- */
.yw-ads-page .yw-ads-quiet { color: #929097; font-size: 14px; font-weight: 400; }
.yw-ads-page .yw-ads-state { margin: 18px 0 6px; color: #202024; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.6px; }
.yw-ads-page .yw-ads-card-state .yw-ads-state { margin: 0; font-size: 19px; }
.yw-ads-page .yw-ads-state .hw-info-label { text-align: left; }
.yw-ads-page .yw-ads-empty { display: flex; flex: 1 1 auto; align-items: center; min-height: 220px; margin: 14px 0 0; color: #87818c; font-size: 14px; }
.yw-ads-page .yw-ads-link { color: #8553c2; font-size: 13px; font-weight: 500; text-decoration: none; }
.yw-ads-page .yw-ads-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* The quiet pill: every secondary move on the board. */
.yw-ads-page .yw-ads-pill { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: #eeeded; color: #202024; font-size: 13px; font-weight: 500; letter-spacing: -.1px; white-space: nowrap; text-decoration: none; transition: background .15s; }
.yw-ads-page .yw-ads-pill:hover { background: #e8e4ed; }
.yw-ads-page .yw-ads-pill:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
/* A change as one word beside a hero figure: ↗ / ↘, green when the move is
   good for the metric, the house pink when it is not. */
.yw-ads-page .yw-ads-move { color: #8f8996; font-size: 13px; font-weight: 500; white-space: nowrap; }
.yw-ads-page .yw-ads-move[data-tone="good"] { color: #279876; }
.yw-ads-page .yw-ads-move[data-tone="bad"] { color: #c85f84; }
.yw-ads-page .yw-money-note .hw-info-label { color: inherit; text-align: left; }
/* The page's flash line (a connect round trip's result). */
.yw-ads-page .yw-ads-flash { margin: 14px 0 0; padding: 11px 16px; border: 1px solid #e2e1e4; border-radius: 16px; background: #fbfbfb; font-size: 14px; }
.yw-ads-page .yw-ads-flash[data-tone="bad"] { border-color: #f0d2dd; background: #fdf6f9; }
.yw-ads-page .yw-ads-notice-mark { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #c85f84; }

/* Platform keys: Google the violet, Meta the lavender, TikTok the house pink. */
.yw-ads-page .yw-ads-swatch { display: inline-block; width: 9px; height: 9px; flex-shrink: 0; border-radius: 3px; background: #c5c0cb; }
.yw-ads-page .yw-ads-swatch[data-platform="google"] { background: #7c3aed; }
.yw-ads-page .yw-ads-swatch[data-platform="meta"] { background: #b48cf2; }
.yw-ads-page .yw-ads-swatch[data-platform="tiktok"] { background: #d85e9e; }
.yw-ads-page .yw-ads-chip { display: inline-flex; align-items: center; gap: 6px; color: #87818c; font-size: 13px; font-weight: 400; white-space: nowrap; }

/* ---------------------------------------------------------- the hero -- */
.yw-ads-page .yw-ads-hero .yw-hero-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.yw-ads-page .yw-ads-hero-of { color: #87818c; font-size: 14px; font-weight: 400; letter-spacing: -.2px; }
.yw-ads-page .yw-ads-hero .yw-hero-status { font-size: 13px; }
.yw-ads-page .yw-ads-hero .yw-hero-pill { padding: 5px 10px; font-size: 12px; }
/* The rows share the card's height, so the hero ends level with the chart
   column beside it and has no empty floor. */
.yw-ads-page .yw-ads-hero-rows { display: flex; flex: 1 1 auto; flex-direction: column; margin: 18px 0; }
.yw-ads-page .yw-ads-hero-rows > .yw-row-stat { flex: 1 1 auto; align-items: center; min-height: 52px; padding: 10px 0; border-top: 1px solid #eae8ec; }
.yw-ads-page :is(.yw-ads-hero-rows, .yw-ads-ga-stats) dt { display: flex; min-width: 0; align-items: baseline; gap: 8px; color: #59535f; font-size: 14px; }
.yw-ads-page :is(.yw-ads-hero-rows, .yw-ads-ga-stats) dd { display: flex; align-items: baseline; gap: 10px; }
.yw-ads-page :is(.yw-ads-hero-rows, .yw-ads-ga-stats) dd > .num:last-child { color: #202024; font-size: 18px; font-weight: 500; letter-spacing: -.4px; }
/* Cost per booking on its target track: the hero's foot. */
.yw-ads-page .yw-ads-cpa { margin-top: auto; padding-top: 16px; border-top: 1px solid #eae8ec; }
.yw-ads-page .yw-ads-cpa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #59535f; font-size: 14px; }
.yw-ads-page .yw-ads-cpa-value { color: #202024; font-size: 18px; font-weight: 500; letter-spacing: -.4px; }
.yw-ads-page .yw-ads-track { margin-top: 12px; }
/* Cost per booking is a cost: red over its target, green inside it, the rule
   every tab's cost bars follow (skin/kit.css, 10/14). */
.yw-ads-page .yw-ads-track[data-over] .yw-track-fill { background: repeating-linear-gradient(125deg, #d2435f 0 2px, #f7d4db 2px 4px); }
.yw-ads-page .yw-ads-track:not([data-over]) .yw-track-fill { background: repeating-linear-gradient(125deg, #2f9e78 0 2px, #d3eee3 2px 4px); }
/* The track's one end label: the target, at its end. */
.yw-ads-page .yw-ads-track-labels { justify-content: flex-end; margin: 8px 0 0; color: #87818c; font-size: 12px; }
.yw-ads-page .yw-ads-cpa-line { margin: 8px 0 0; color: #87818c; font-size: 13px; }

/* ------------------------------------- what Google Analytics saw (one row) -- */
.yw-ads-page .yw-ads-ga { flex-direction: row; align-items: center; gap: 22px; padding: 17px 23px; }
.yw-ads-page .yw-ads-ga-title { flex-shrink: 0; margin: 0; color: #202024; font-size: 16px; font-weight: 500; letter-spacing: -.35px; white-space: nowrap; }
.yw-ads-page .yw-ads-ga-title .hw-info-label { font-weight: 500; text-align: left; }
.yw-ads-page .yw-ads-ga-stats { display: grid; min-width: 0; flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.yw-ads-page .yw-ads-ga-stats > .yw-row-stat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 0 0 0 18px; border-top: 0; border-left: 1px solid #eae8ec; }
.yw-ads-page .yw-ads-ga-stats dt { font-size: 13px; color: #87818c; }
.yw-ads-page .yw-ads-ga-line { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 12px; margin: 0; color: #59535f; font-size: 14px; }
.yw-ads-page .yw-ads-ga-line[data-tone="bad"] { justify-content: flex-start; color: #a96883; }
.yw-ads-page .yw-ads-ga-line .hw-info-label { color: inherit; font-weight: 500; text-align: left; }

/* --------------------------------------------------------- the chart -- */
/* 10/07 (owner: "this chart is confusing and hard to understand please re
   design it"): ONE money scale with every step labeled and a hairline at
   each. A period is a violet revenue column with its grey spend column
   beside it (owner, 10/07: "we can just palce the spend on the side od the
   revenue that way tis more comparable"), each with its figure on top, and
   a Return row runs under the dates while the columns have room. Alone, spend takes the plot and the
   violet. The plot grows with the card, so the chart ends level with the
   hero. --head is the room over the tallest column for its figure; --foot
   is the date row (and the Return row) under the plot. */
.yw-ads-page .yw-ads-chart { --head: 10px; --foot: 30px; display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.yw-ads-page .yw-ads-chart[data-values] { --head: 26px; }
.yw-ads-page .yw-ads-chart[data-return] { --foot: 54px; }
.yw-ads-page .yw-ads-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; color: #59535f; font-size: 13px; }
.yw-ads-page .yw-ads-key > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.yw-ads-page .yw-ads-key i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.yw-ads-page .yw-ads-key-off { color: #a96883; cursor: help; }
.yw-ads-page .yw-ads-plot { display: grid; flex: 1 1 auto; grid-template-columns: 50px minmax(0, 1fr); min-height: 320px; margin-top: 12px; }
.yw-ads-page .yw-ads-axis { display: flex; min-height: 0; flex-direction: column; padding-right: 10px; color: #929097; font-size: 12px; text-align: right; }
.yw-ads-page .yw-ads-axis-rail { position: relative; display: block; flex: 1 1 auto; margin-top: var(--head); }
.yw-ads-page .yw-ads-axis-rail > span { position: absolute; right: 0; line-height: 1; transform: translateY(50%); white-space: nowrap; }
.yw-ads-page .yw-ads-axis-date { display: block; flex: none; height: 30px; }
.yw-ads-page .yw-ads-axis-return { display: block; flex: none; height: 24px; color: #87818c; font-size: 12px; line-height: 24px; }
.yw-ads-page .yw-ads-cols { position: relative; display: grid; min-width: 0; gap: 6px; }
.yw-ads-page .yw-ads-cols[data-dense] { gap: 2px; }
/* The scale's hairlines, behind the columns; the zero line is the floor. */
.yw-ads-page .yw-ads-grid { position: absolute; top: var(--head); right: 0; bottom: var(--foot); left: 0; pointer-events: none; }
.yw-ads-page .yw-ads-grid > i { position: absolute; right: 0; left: 0; height: 1px; background: #ece8f0; }
.yw-ads-page .yw-ads-grid > i:first-child { background: #d9d4de; }
.yw-ads-page .yw-ads-col { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: stretch; border-radius: 10px; outline: none; cursor: default; }
.yw-ads-page .yw-ads-col:focus-visible { box-shadow: 0 0 0 2px #b993ff; }
/* 10/07 (owner: "other components should not be on top when the modal
   appears"): the hovered period rises over its neighbours, so its chip sits
   above their columns and figures. */
.yw-ads-page .yw-ads-col:is(:hover, :focus-visible) { z-index: 6; }
.yw-ads-page .yw-ads-col-rail { position: relative; display: flex; flex: 1 1 auto; min-height: 60px; margin-top: var(--head); align-items: flex-end; justify-content: center; gap: 6px; }
.yw-ads-page .yw-ads-col-stack { position: relative; display: flex; flex: 0 0 auto; width: min(40%, 46px); }
.yw-ads-page .yw-ads-chart[data-panels="1"] .yw-ads-col-stack[data-series="spend"] { width: min(60%, 56px); }
.yw-ads-page .yw-ads-cols[data-dense] .yw-ads-col-rail { gap: 2px; }
.yw-ads-page .yw-ads-cols[data-dense] .yw-ads-col-stack { width: min(44%, 14px); }
.yw-ads-page .yw-ads-col-parts { display: flex; grid-area: 1 / 1; width: 100%; height: 100%; align-items: flex-end; justify-content: center; gap: 3px; }
.yw-ads-page .yw-ads-col-bar { position: relative; display: block; width: 100%; height: 100%; border-radius: 6px 6px 0 0; transform-origin: bottom; animation: yw-ads-grow .65s cubic-bezier(.2, .7, .2, 1) both; transition: box-shadow .28s cubic-bezier(.2, .8, .2, 1), filter .2s ease; }
.yw-ads-page .yw-ads-cols[data-dense] .yw-ads-col-bar { border-radius: 4px 4px 0 0; }
.yw-ads-page .yw-ads-col-rev { background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
.yw-ads-page .yw-ads-col-spend { background: repeating-linear-gradient(125deg, #8f8996 0 2px, #d6d2db 2px 4px); animation-delay: .08s; }
/* The spend figure on its column, a step quieter than revenue's. */
.yw-ads-page .yw-ads-col-stack[data-series="spend"] .yw-ads-col-value { color: #59535f; font-size: 12px; font-weight: 400; }
.yw-ads-page .yw-ads-chart[data-panels="1"] .yw-ads-col-stack[data-series="spend"] .yw-ads-col-value { color: #202024; font-size: 13px; font-weight: 500; }
.yw-ads-page .yw-ads-col-spend[data-alone] { background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); box-shadow: none; animation-delay: 0s; }
.yw-ads-page .yw-ads-col-solo { width: min(26%, 18px); }
.yw-ads-page .yw-ads-col-solo[data-platform="google"] { background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
.yw-ads-page .yw-ads-col-solo[data-platform="meta"] { background: repeating-linear-gradient(125deg, #b48cf2 0 2px, #ece2fc 2px 4px); }
.yw-ads-page .yw-ads-col-solo[data-platform="tiktok"] { background: repeating-linear-gradient(125deg, #d85e9e 0 2px, #f8dae9 2px 4px); }
/* The column's figure, on top of its column. */
.yw-ads-page .yw-ads-col-value { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 3; color: #202024; font-size: 13px; font-weight: 500; letter-spacing: -.2px; line-height: 1; white-space: nowrap; transform: translateX(-50%); animation: yw-ads-value-in .5s .35s cubic-bezier(.2, .7, .2, 1) both; }
.yw-ads-page .yw-ads-key-rev { background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
.yw-ads-page .yw-ads-key-spend { background: repeating-linear-gradient(125deg, #8f8996 0 2px, #d6d2db 2px 4px); }
.yw-ads-page .yw-ads-key-spend[data-alone], .yw-ads-page .yw-ads-key-spend[data-platform="google"] { background: repeating-linear-gradient(125deg, #8a45f0 0 2px, #d4b6fb 2px 4px); }
.yw-ads-page .yw-ads-key-spend[data-platform="meta"] { background: repeating-linear-gradient(125deg, #b48cf2 0 2px, #ece2fc 2px 4px); }
.yw-ads-page .yw-ads-key-spend[data-platform="tiktok"] { background: repeating-linear-gradient(125deg, #d85e9e 0 2px, #f8dae9 2px 4px); }
.yw-ads-page .yw-ads-col-label { display: block; height: 18px; margin-top: 12px; color: #736b79; font-size: 12px; line-height: 18px; text-align: center; white-space: nowrap; }
.yw-ads-page .yw-ads-col[data-partial] .yw-ads-col-label { color: #a59fab; }
.yw-ads-page .yw-ads-col-return { display: block; height: 24px; color: #343039; font-size: 13px; font-weight: 500; line-height: 24px; text-align: center; white-space: nowrap; }
.yw-ads-page .yw-ads-cols:not([data-dense]) .yw-ads-col-return { margin: 0 2px; border-top: 1px solid #ece8f0; }
/* A column lifts on hover or focus, and its chip says the bucket. */
.yw-ads-page .yw-ads-col:is(:hover, :focus-visible) .yw-ads-col-rev, .yw-ads-page .yw-ads-col:is(:hover, :focus-visible) .yw-ads-col-spend[data-alone], .yw-ads-page .yw-ads-col:is(:hover, :focus-visible) .yw-ads-col-solo { box-shadow: 0 6px 14px rgba(124, 58, 237, .22); }
.yw-ads-page .yw-ads-col:is(:hover, :focus-visible) .yw-ads-col-spend:not([data-alone]) { box-shadow: 0 6px 14px rgba(48, 32, 64, .16); }
.yw-ads-page .yw-ads-col:is(:hover, :focus-visible) :is(.yw-ads-col-label, .yw-ads-col-return) { color: #202024; }
.yw-ads-page .yw-ads-col-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 8; display: flex; width: max-content; max-width: 280px; flex-direction: column; gap: 3px; padding: 8px 12px; border: 1px solid #e5ddea; border-radius: 13px; background: #fdfcfe; box-shadow: 0 12px 30px #3a214424, 0 2px 6px #3a21440d; color: #59535f; font-size: 12px; line-height: 1.4; opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity .18s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
/* The chip opens just above the period's taller column (--tip-at, set on
   the rail), clear of the figure on it. */
.yw-ads-page .yw-ads-col-rail > .yw-ads-col-tip { bottom: calc(var(--tip-at, 0%) + 12px); }
.yw-ads-page .yw-ads-chart[data-values] .yw-ads-col-rail > .yw-ads-col-tip { bottom: calc(var(--tip-at, 0%) + 30px); }
.yw-ads-page .yw-ads-col[data-edge="start"] .yw-ads-col-tip { left: 0; transform: translate(0, 5px); }
.yw-ads-page .yw-ads-col[data-edge="end"] .yw-ads-col-tip { right: 0; left: auto; transform: translate(0, 5px); }
.yw-ads-page .yw-ads-col:is(:hover, :focus-visible) .yw-ads-col-tip { opacity: 1; transform: translate(-50%, 0); }
.yw-ads-page .yw-ads-col:is(:hover, :focus-visible)[data-edge] .yw-ads-col-tip { transform: translate(0, 0); }
.yw-ads-page .yw-ads-col-tip-period { color: #87818c; font-size: 12px; }
.yw-ads-page .yw-ads-col-tip-figures { display: flex; flex-wrap: wrap; gap: 2px 12px; color: #59535f; font-size: 13px; }
.yw-ads-page .yw-ads-col-tip-parts { display: flex; flex-wrap: wrap; gap: 2px 12px; color: #87818c; font-size: 12px; }
.yw-ads-page .yw-ads-col-tip b { color: #202024; font-weight: 500; }
@keyframes yw-ads-value-in { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes yw-ads-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------------------------------------------------------- the tables -- */
.yw-ads-page .yw-ads-scroll { margin-top: 14px; }
.yw-ads-page .yw-ads-table { min-width: 560px; font-size: 14px; }
.yw-ads-page .yw-ads-platform-table { min-width: 980px; }
.yw-ads-page .yw-ads-campaign-table { min-width: 900px; }
.yw-ads-page .yw-ads-table th { padding: 0 10px 10px; color: #766d7c; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.yw-ads-page .yw-ads-table td { padding: 13px 10px; color: #49434e; font-size: 14px; vertical-align: middle; }
.yw-ads-page .yw-ads-table :is(th, td):first-child { padding-left: 0; }
.yw-ads-page .yw-ads-table :is(th, td):last-child { padding-right: 0; }
.yw-ads-page .yw-ads-table tbody tr:first-child > td { border-top: 0; }
.yw-ads-page .yw-ads-table td strong { color: #202024; font-weight: 500; }
.yw-ads-page .yw-ads-cell { position: relative; text-align: right; white-space: nowrap; }
.yw-ads-page .yw-ads-cell-value { display: block; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.2px; }
.yw-ads-page .yw-ads-cell[data-tipped] { cursor: default; }
.yw-ads-page .yw-ads-cell[data-tipped]:hover .yw-ads-cell-value { color: #7433d4; }
.yw-ads-page .yw-ads-dot { color: #b4aebb; }
/* The cell's hover chip: its move and any note, the house chip. */
.yw-ads-page .yw-ads-tip { position: absolute; right: 0; bottom: calc(100% - 4px); z-index: 6; display: flex; width: max-content; max-width: 260px; flex-direction: column; gap: 2px; padding: 6px 11px; border: 1px solid #e5ddea; border-radius: 13px; background: #fdfcfe; box-shadow: 0 12px 30px #3a214424, 0 2px 6px #3a21440d; color: #59535f; font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .18s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
.yw-ads-page .yw-ads-cell[data-tipped]:hover > .yw-ads-tip { opacity: 1; transform: none; }
.yw-ads-page .yw-ads-tip b { color: #202024; font-weight: 500; }
.yw-ads-page .yw-ads-tip b[data-tone="good"] { color: #23805f; }
.yw-ads-page .yw-ads-tip b[data-tone="bad"] { color: #b4547d; }
.yw-ads-page .yw-ads-row-head { min-width: 170px; text-align: left; }
.yw-ads-page .yw-ads-row-title { display: block; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.2px; }
.yw-ads-page .yw-ads-row-title .hw-info-label { font-weight: 500; text-align: left; }
.yw-ads-page .yw-ads-row-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; color: #929097; font-size: 13px; font-weight: 400; }
.yw-ads-page .yw-ads-name { display: inline-flex; align-items: center; gap: 8px; }
.yw-ads-page .yw-ads-row-word { color: #87818c; font-size: 14px; text-align: right; white-space: nowrap; }
.yw-ads-page .yw-ads-row-word .hw-info-label { color: #87818c; text-align: right; }
.yw-ads-page .yw-ads-row-word .yw-ads-pill { height: 30px; }
/* Share of spend: the hatched track under the figure. */
.yw-ads-page .yw-ads-share { display: block; width: 64px; height: 6px; margin: 6px 0 0 auto; overflow: hidden; border-radius: 3px; background: #eeedf1; }
.yw-ads-page .yw-ads-share > i { display: block; height: 100%; border-radius: inherit; background: repeating-linear-gradient(125deg, #9161df 0 2px, #dcccfa 2px 4px); }
/* The Total row, set apart; platform subtotals quieter. */
.yw-ads-page .yw-ads-table tr.yw-ads-total > td { border-top: 1.5px solid #d9d4de; background: #f8f6fa; }
.yw-ads-page .yw-ads-table tr.yw-ads-total > td:first-child { padding-left: 12px; border-radius: 12px 0 0 12px; }
.yw-ads-page .yw-ads-table tr.yw-ads-total > td:last-child { padding-right: 12px; border-radius: 0 12px 12px 0; }
.yw-ads-page .yw-ads-table tr.yw-ads-total > td[colspan]:first-child:last-child { border-radius: 12px; }
.yw-ads-page .yw-ads-table tr.yw-ads-total:hover { background: transparent; }
.yw-ads-page .yw-ads-table tr.yw-ads-subtotal > td { background: #fbfafc; }
.yw-ads-page .yw-ads-table tr.yw-ads-subtotal:first-of-type > td, .yw-ads-page .yw-ads-table tr:not(.yw-ads-subtotal) + tr.yw-ads-subtotal > td { border-top: 1.5px solid #e2dee6; }
.yw-ads-page .yw-ads-table td.yw-ads-row-word[colspan] { text-align: right; }
.yw-ads-page .yw-ads-table tr.yw-ads-total > td.yw-ads-row-word:only-child { color: #87818c; font-size: 14px; text-align: left; white-space: normal; }

/* Campaigns: a name that holds its line, its platform and status under it,
   the ad sets' drill-down under the row. */
.yw-ads-page .yw-ads-campaign-name { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-ads-page .yw-ads-status { color: #929097; font-size: 13px; white-space: nowrap; }
.yw-ads-page .yw-ads-status[data-on]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: #2f8a6d; vertical-align: middle; }
/* 10/9: the campaign kind read off its name (lib/ads/campaign-type.ts), a quiet hairline pill. */
.yw-ads-page .yw-ads-type { display: inline-block; padding: 0 8px; border: 1px solid #e6e2ea; border-radius: 999px; color: #6f6876; font-size: 12px; line-height: 20px; white-space: nowrap; }
.yw-ads-page .yw-ads-campaign-table tr:not([data-ran]):not(.yw-ads-total):not(.yw-ads-subtotal):not(.yw-ads-children) .yw-ads-row-title { color: #87818c; }
.yw-ads-page .yw-ads-table tr.yw-ads-children > td { padding: 0 0 12px; border-top: 0; }
.yw-ads-page .yw-ads-table tr.yw-ads-children:hover { background: transparent; }
.yw-ads-page .yw-ads-drill > summary { display: inline-flex; align-items: center; gap: 6px; color: #8553c2; font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; }
.yw-ads-page .yw-ads-drill > summary::-webkit-details-marker { display: none; }
.yw-ads-page .yw-ads-drill > summary::marker { content: ""; }
.yw-ads-page .yw-ads-drill > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; }
.yw-ads-page .yw-ads-drill[open] > summary::before { transform: rotate(45deg); }
.yw-ads-page .yw-ads-drill > summary:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; border-radius: 6px; }
.yw-ads-page .yw-ads-child-table { width: 100%; margin-top: 8px; border-collapse: collapse; border-radius: 12px; background: #f4f3f6; font-size: 14px; }
.yw-ads-page .yw-ads-child-table th { padding: 9px 12px 6px; color: #87818c; font-size: 12px; font-weight: 500; text-align: left; }
.yw-ads-page .yw-ads-child-table th.text-right { text-align: right; }
.yw-ads-page .yw-ads-child-table td { padding: 8px 12px; border-top: 1px solid #eae8ec; color: #59535f; font-size: 14px; }
.yw-ads-page .yw-ads-child-name { max-width: 320px; overflow: hidden; color: #343039; text-overflow: ellipsis; white-space: nowrap; }

/* Attribution proof: the reservation id, the match as a plain word (the
   house pink only when it could not be joined), the booked date as words. */
.yw-ads-page .yw-ads-proof-id { color: #202024; font-size: 14px; font-weight: 500; letter-spacing: .01em; cursor: help; }
.yw-ads-page .yw-ads-flag { color: #59535f; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.yw-ads-page .yw-ads-flag[data-tone="bad"] { color: #a96883; font-weight: 500; }
.yw-ads-page .yw-ads-proof-date { color: #59535f; font-size: 14px; white-space: nowrap; }
.yw-ads-page .yw-ads-proof .yw-ads-scroll { max-height: 26rem; }
.yw-ads-page .yw-ads-proof-table { min-width: 560px; }
.yw-ads-page .yw-ads-proof-table :is(th, td) { padding-right: 8px; padding-left: 8px; }
/* Verification and the proof stack (10/07): side by side, Verification's
   seven columns were cut and its card had an empty floor beside the proof's
   long list. Full width, each table shows every column and ends with its
   rows; the proof scrolls inside. */
.yw-ads-page .yw-ads-proof-row { grid-template-columns: minmax(0, 1fr); }
/* Verification (skin/get-found-ads-setup.css .yw-gfa-verify): only its type
   is held to the board's sizes here. */
.yw-ads-page .yw-ads-proof-row .yw-gfa-verify { margin: 0; }
.yw-ads-page .yw-ads-proof-row .yw-gfa-verify .yw-gfa-table td { font-size: 14px; }
.yw-ads-page .yw-ads-proof-row .yw-gfa-verify .yw-gfa-word { font-size: 14px; }

/* 10/07 (owner, on Platforms, Campaigns, Verification and Attribution proof:
   "this container can have a bit bigger font size"): the report's tables one
   size up. Figures, names, dates and status words 15px, column heads 13px,
   the line under a name 14px, and a little more room per row. */
.yw-ads-page .yw-ads-table th { padding-bottom: 12px; font-size: 13px; }
.yw-ads-page .yw-ads-table td { padding-top: 15px; padding-bottom: 15px; font-size: 15px; }
.yw-ads-page :is(.yw-ads-cell-value, .yw-ads-row-title, .yw-ads-row-word, .yw-ads-proof-id, .yw-ads-proof-date) { font-size: 15px; }
.yw-ads-page :is(.yw-ads-row-line, .yw-ads-status, .yw-ads-drill > summary, .yw-ads-flag) { font-size: 14px; }
.yw-ads-page .yw-ads-table tr.yw-ads-total > td.yw-ads-row-word:only-child { font-size: 15px; }
.yw-ads-page .yw-ads-child-table { font-size: 15px; }
.yw-ads-page .yw-ads-child-table th { font-size: 13px; }
.yw-ads-page .yw-ads-child-table td { padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
.yw-ads-page .yw-ads-proof-row .yw-gfa-verify .yw-gfa-table thead th { padding-bottom: 10px; font-size: 13px; }
.yw-ads-page .yw-ads-proof-row .yw-gfa-verify .yw-gfa-table td { padding-top: 14px; padding-bottom: 14px; font-size: 15px; }
.yw-ads-page .yw-ads-proof-row .yw-gfa-verify .yw-gfa-word { font-size: 15px; }

/* ------------------------------------------------------- heat grids -- */
/* The house grid (heat-table.tsx): it fills the card, 34px cells with 13px
   figures, 13px names cut with their full text in the hover, 12px dates, a
   blank cell for a bucket with nothing, each cell's sentence its hover chip. */
.yw-ads-page .yw-ads-heat { margin-top: 16px; }
.yw-ads-page .yw-ads-heat-scroll { overflow: visible; }
.yw-ads-page .yw-ads-heat-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
.yw-ads-page .yw-ads-heat-table thead th { overflow: hidden; padding: 0 0 6px; color: #87818c; font-size: 12px; font-weight: 500; letter-spacing: 0; text-align: center; text-transform: none; white-space: nowrap; }
.yw-ads-page .yw-ads-heat-table tbody th { overflow: hidden; padding: 0 12px 0 0; color: #59535f; font-size: 13px; font-weight: 400; letter-spacing: -.1px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.yw-ads-page .yw-ads-heat-table tbody tr:hover { background: transparent; }
.yw-ads-page .yw-ads-heat-table td { padding: 0; border: 0; }
.yw-ads-page .yw-ads-heat-cell { position: relative; display: flex; height: 34px; align-items: center; justify-content: center; border-radius: 8px; background: #f3f2f5; color: #4b2390; font-size: 13px; font-weight: 500; letter-spacing: -.2px; white-space: nowrap; transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s cubic-bezier(.2, .8, .2, 1); }
.yw-ads-page .yw-ads-heat-table[data-dense] .yw-ads-heat-cell { font-size: 12px; letter-spacing: -.4px; }
/* 10/07 (owner: "these container doesent seem to be using the new theme
   style"): the cells take the Pricing heatmap's ramp, near-white to the deep
   125 degree hatched violet with a hairline edge, and a period the campaign
   did not run is the grey hatch of "no reading". 38px cells, 14px figures,
   14px names, 13px dates. */
.yw-ads-page .yw-ads-heat-table { border-spacing: 4px; }
.yw-ads-page .yw-ads-heat-table thead th { padding-bottom: 8px; font-size: 13px; }
.yw-ads-page .yw-ads-heat-table tbody th { color: #343039; font-size: 14px; }
.yw-ads-page .yw-ads-heat-cell { height: 38px; border: 1px solid #e2e1e4; border-radius: 10px; background: repeating-linear-gradient(125deg, #e8e6eb 0 2px, #f5f4f7 2px 6px); color: #4b2390; font-size: 14px; }
.yw-ads-page .yw-ads-heat-cell[data-level="1"] { border-color: #ece4fb; background: #f6f2fd; }
.yw-ads-page .yw-ads-heat-cell[data-level="2"] { border-color: #dfd0f9; background: #ebe1fc; }
.yw-ads-page .yw-ads-heat-cell[data-level="3"] { border-color: #cfb8f6; background: repeating-linear-gradient(125deg, #d3bdf8 0 2px, #e3d5fb 2px 5px); }
.yw-ads-page .yw-ads-heat-cell[data-level="4"] { border-color: #a27aec; background: repeating-linear-gradient(125deg, #a978f2 0 2px, #bc98f5 2px 5px); color: #241047; }
.yw-ads-page .yw-ads-heat-cell[data-level="5"] { border-color: #6f2fdc; background: repeating-linear-gradient(125deg, #7c3aed 0 2px, #9153f1 2px 5px); color: #fff; }
.yw-ads-page .yw-ads-heat-table[data-dense] .yw-ads-heat-cell { height: 34px; border-radius: 8px; }
.yw-ads-page .yw-ads-heat-cell[data-flag="alert"] { background: #f6d3e2; color: #9f3f69; }
.yw-ads-page .yw-ads-heat-cell[data-flag="watch"] { background: #f6ecdc; color: #86704f; }
.yw-ads-page .yw-ads-heat-cell[data-tip]:hover { z-index: 4; box-shadow: 0 6px 14px rgba(124, 58, 237, .2); transform: translateY(-2px); }
.yw-ads-page .yw-ads-heat-cell[data-tip]::after { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 9; display: block; width: max-content; max-width: 280px; padding: 6px 11px; border: 1px solid #e5ddea; border-radius: 13px; background: #fdfcfe; box-shadow: 0 12px 30px #3a214424, 0 2px 6px #3a21440d; color: #59535f; content: attr(data-tip); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.4; text-align: left; white-space: normal; opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity .18s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
.yw-ads-page .yw-ads-heat-cell[data-tip][data-edge="start"]::after { left: 0; transform: translate(0, 5px); }
.yw-ads-page .yw-ads-heat-cell[data-tip][data-edge="end"]::after { right: 0; left: auto; transform: translate(0, 5px); }
.yw-ads-page .yw-ads-heat-cell[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
.yw-ads-page .yw-ads-heat-cell[data-tip][data-edge]:hover::after { transform: translate(0, 0); }
/* The key, one line at 12px. */
.yw-ads-page .yw-ads-heat-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; color: #87818c; font-size: 12px; }
.yw-ads-page .yw-ads-heat-ramp { display: inline-flex; gap: 3px; }
.yw-ads-page .yw-ads-heat-ramp > i, .yw-ads-page .yw-ads-heat-blank > i { display: inline-block; width: 18px; height: 11px; border-radius: 3px; }
.yw-ads-page .yw-ads-heat-ramp > i { border: 1px solid transparent; }
.yw-ads-page .yw-ads-heat-ramp > i[data-level="1"] { border-color: #ece4fb; background: #f6f2fd; }
.yw-ads-page .yw-ads-heat-ramp > i[data-level="2"] { border-color: #dfd0f9; background: #ebe1fc; }
.yw-ads-page .yw-ads-heat-ramp > i[data-level="3"] { border-color: #cfb8f6; background: repeating-linear-gradient(125deg, #d3bdf8 0 2px, #e3d5fb 2px 5px); }
.yw-ads-page .yw-ads-heat-ramp > i[data-level="4"] { border-color: #a27aec; background: repeating-linear-gradient(125deg, #a978f2 0 2px, #bc98f5 2px 5px); }
.yw-ads-page .yw-ads-heat-ramp > i[data-level="5"] { border-color: #6f2fdc; background: repeating-linear-gradient(125deg, #7c3aed 0 2px, #9153f1 2px 5px); }
.yw-ads-page .yw-ads-heat-key { font-size: 13px; }
.yw-ads-page .yw-ads-heat-blank { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }
.yw-ads-page .yw-ads-heat-blank > i { background: repeating-linear-gradient(125deg, #e8e6eb 0 2px, #f5f4f7 2px 6px); box-shadow: inset 0 0 0 1px #e2e1e4; }

/* ---------------------------------------------------------- the mix -- */
/* Two donuts stacked in the card, each 160px with its legend beside it. */
.yw-ads-page .yw-ads-mix-pair { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-start; gap: 18px; margin-top: 16px; }
.yw-ads-page .yw-ads-donut { display: flex; min-width: 0; flex-direction: column; }
.yw-ads-page .yw-ads-donut + .yw-ads-donut { padding-top: 18px; border-top: 1px solid #ecebef; }
.yw-ads-page .yw-ads-subhead { margin: 0; color: #202024; font-size: 15px; font-weight: 500; letter-spacing: -.3px; }
.yw-ads-page .yw-ads-donut-refusal { margin: 8px 0 0; line-height: 1.5; }
/* 10/07 (owner: "these container doesent seem to be using the new theme
   style", then "we can use another style of graph or something"): each mix
   is a hundred dots in a ten by ten grid, the house's dot personality, with
   the key beside it. Dots pop in row by row; hovering a key row quiets every
   other slice's dots. */
.yw-ads-page .yw-ads-waffle { display: grid; grid-template-columns: 138px minmax(0, 1fr); align-items: center; gap: 26px; margin-top: 12px; }
.yw-ads-page .yw-ads-waffle-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; width: 138px; }
.yw-ads-page .yw-ads-waffle-dots > i { display: block; aspect-ratio: 1; border-radius: 50%; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); animation: yw-ads-dot-in .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--n) * 6ms); }
.yw-ads-page .yw-ads-waffle:has(.yw-ads-waffle-key > li[data-slice="0"]:is(:hover, :focus-visible)) .yw-ads-waffle-dots > i:not([data-slice="0"]),
.yw-ads-page .yw-ads-waffle:has(.yw-ads-waffle-key > li[data-slice="1"]:is(:hover, :focus-visible)) .yw-ads-waffle-dots > i:not([data-slice="1"]),
.yw-ads-page .yw-ads-waffle:has(.yw-ads-waffle-key > li[data-slice="2"]:is(:hover, :focus-visible)) .yw-ads-waffle-dots > i:not([data-slice="2"]),
.yw-ads-page .yw-ads-waffle:has(.yw-ads-waffle-key > li[data-slice="3"]:is(:hover, :focus-visible)) .yw-ads-waffle-dots > i:not([data-slice="3"]),
.yw-ads-page .yw-ads-waffle:has(.yw-ads-waffle-key > li[data-slice="4"]:is(:hover, :focus-visible)) .yw-ads-waffle-dots > i:not([data-slice="4"]),
.yw-ads-page .yw-ads-waffle:has(.yw-ads-waffle-key > li[data-slice="5"]:is(:hover, :focus-visible)) .yw-ads-waffle-dots > i:not([data-slice="5"]),
.yw-ads-page .yw-ads-waffle:has(.yw-ads-waffle-key > li[data-slice="6"]:is(:hover, :focus-visible)) .yw-ads-waffle-dots > i:not([data-slice="6"]),
.yw-ads-page .yw-ads-waffle:has(.yw-ads-waffle-key > li[data-slice="7"]:is(:hover, :focus-visible)) .yw-ads-waffle-dots > i:not([data-slice="7"]) { opacity: .18; transform: scale(.82); }
.yw-ads-page .yw-ads-waffle-key { margin: 0; padding: 0; list-style: none; }
.yw-ads-page .yw-ads-waffle-key > li { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.4rem; align-items: center; gap: 14px; padding: 9px 4px; border-top: 1px solid #eae8ec; border-radius: 8px; outline: none; cursor: default; transition: background-color .15s ease; }
.yw-ads-page .yw-ads-waffle-key > li:first-child { border-top: 0; }
.yw-ads-page .yw-ads-waffle-key > li:is(:hover, :focus-visible) { background: #f4f0fa; }
.yw-ads-page .yw-ads-waffle-key > li > strong { color: #202024; font-size: 15px; font-weight: 500; text-align: right; }
.yw-ads-page .yw-ads-waffle-key .yw-ads-legend-pct { min-width: 0; }
.yw-ads-page .yw-ads-mix-name { display: flex; min-width: 0; align-items: center; gap: 9px; color: #343039; font-size: 14px; }
.yw-ads-page .yw-ads-mix-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-ads-page .yw-ads-mix-name > i { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; }
.yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone] { background: #dedae2; }
.yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="google"] { background: #7c3aed; }
.yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="meta"] { background: #b48cf2; }
.yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="tiktok"] { background: #d85e9e; }
.yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="source-0"] { background: #8e8796; }
.yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="source-1"] { background: #aba5b2; }
.yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="source-2"] { background: #c7c2cc; }
@keyframes yw-ads-dot-in { from { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .yw-ads-page .yw-ads-waffle-dots > i { animation: none; transition: none; } }
@media (max-width: 520px) { .yw-ads-page .yw-ads-waffle { grid-template-columns: minmax(0, 1fr); justify-items: center; } .yw-ads-page .yw-ads-waffle-key { width: 100%; } }
.yw-ads-page .yw-ads-donut-body { display: flex; align-items: center; gap: 26px; margin-top: 12px; }
.yw-ads-page .yw-ads-donut-svg { width: 160px; height: 160px; flex-shrink: 0; }
.yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone] { fill: #c5c0cb; background: #c5c0cb; }
.yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="google"] { fill: #7c3aed; background: #7c3aed; }
.yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="meta"] { fill: #b48cf2; background: #b48cf2; }
.yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="tiktok"] { fill: #d85e9e; background: #d85e9e; }
.yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="source-0"] { fill: #8e8796; background: #8e8796; }
.yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="source-1"] { fill: #aba5b2; background: #aba5b2; }
.yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="source-2"] { fill: #c7c2cc; background: #c7c2cc; }
.yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="other"] { fill: #dedae2; background: #dedae2; }
.yw-ads-page .yw-ads-donut-svg path { stroke: #fbfbfb; stroke-width: 1.2; }
.yw-ads-page .yw-ads-donut-hole { fill: #fbfbfb; }
.yw-ads-page .yw-ads-legend { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.yw-ads-page .yw-ads-legend li { display: flex; min-width: 0; align-items: baseline; gap: 10px; color: #59535f; font-size: 14px; }
.yw-ads-page .yw-ads-legend i { width: 10px; height: 10px; flex-shrink: 0; align-self: center; border-radius: 3px; }
.yw-ads-page .yw-ads-legend-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-ads-page .yw-ads-legend strong { margin-left: auto; color: #202024; font-size: 15px; font-weight: 500; }
.yw-ads-page .yw-ads-legend-pct { min-width: 48px; color: #87818c; font-size: 13px; text-align: right; }
/* Where bookings came from ends level with the mix: its table takes the room. */
.yw-ads-page .yw-ads-sources .yw-ads-scroll { min-height: 0; flex: 1 1 auto; }
.yw-ads-page .yw-ads-sources .yw-ads-table { min-width: 0; }
.yw-ads-page .yw-ads-sources .yw-ads-row-head { min-width: 0; max-width: 220px; }
.yw-ads-page .yw-ads-sources .yw-ads-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 10/07: beside the mix card, the sources list fills the row the mix card sets
   and scrolls inside (contain: size keeps it from setting the row), so the two
   cards end level with no floor in either. */
.yw-ads-page .yw-ads-pair:not(:has(> :only-child)) .yw-ads-sources .yw-ads-scroll[data-scroll] { contain: size; flex: 1 1 0; min-height: 280px; max-height: none; }

/* ------------------------------ the quiet segments on the cards -- */
/* The grain, the heat metric, the click-hour engine: 12px words, the white
   pill on the grey track (the shared skin's data-ui="segmented"). */
.yw-ads-page .yw-ads-seg[data-ui="segmented"] { display: inline-flex; flex-shrink: 0; }
.yw-ads-page .yw-ads-seg[data-ui="segmented"] > a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; text-decoration: none; white-space: nowrap; }

/* -------------------------------------------------- the hover panels -- */
.hw-info-body .yw-ads-hover-defs li { padding: 3px 0; }
.hw-info-body .yw-ads-hover-defs li + li { border-top: 1px solid #f0eef2; }

/* ---------------------------------------------------------- narrower -- */
@media (max-width: 1180px) {
  .yw-ads-page .yw-ads-top { grid-template-columns: minmax(0, 1fr); }
  .yw-ads-page .yw-ads-pair { grid-template-columns: minmax(0, 1fr); }
  .yw-ads-page .yw-ads-heat-scroll { overflow-x: auto; scrollbar-width: thin; }
}
@media (max-width: 760px) {
  .yw-ads-page .yw-ads-ga { flex-direction: column; align-items: flex-start; }
  .yw-ads-page .yw-ads-ga-stats { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .yw-ads-page .yw-ads-plot { min-height: 260px; }
  .yw-ads-page .yw-ads-donut-body { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .yw-ads-page :is(.yw-ads-col-bar, .yw-ads-col-value, .yw-ads-heat-cell) { animation: none; transition: none; }
  .yw-ads-page :is(.yw-ads-col-tip, .yw-ads-tip, .yw-ads-pill, .yw-ads-drill > summary::before) { transition: none; }
  .yw-ads-page .yw-ads-heat-cell[data-tip]::after { transition: none; }
}

/* ---------------------------------------------------------------- dark -- */
[data-theme-root].dark .yw-ads-page :is(.yw-ads-quiet, .yw-ads-row-line, .yw-ads-chip, .yw-ads-status, .yw-ads-row-word, .yw-ads-axis, .yw-ads-head-count, .yw-ads-legend-pct, .yw-ads-cpa-line, .yw-ads-hero-of, .yw-ads-empty, .yw-ads-track-labels, .yw-ads-heat-key) { color: #a297ab; }
[data-theme-root].dark .yw-ads-page .yw-ads-row-word .hw-info-label { color: #a297ab; }
[data-theme-root].dark .yw-ads-page .yw-ads-type { border-color: #3a3340; color: #c9bfd2; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-state, .yw-ads-row-title, .yw-ads-cell-value, .yw-ads-cpa-value, .yw-ads-subhead, .yw-ads-proof-id, .yw-ads-legend strong, .yw-ads-ga-title) { color: #f3eef8; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-hero-rows, .yw-ads-ga-stats) dd > .num:last-child { color: #f3eef8; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-hero-rows, .yw-ads-ga-stats) dt, [data-theme-root].dark .yw-ads-page .yw-ads-cpa-head, [data-theme-root].dark .yw-ads-page :is(.yw-ads-legend li, .yw-ads-key, .yw-ads-ga-line, .yw-ads-flag, .yw-ads-proof-date) { color: #d9d2e3; }
[data-theme-root].dark .yw-ads-page .yw-ads-ga-stats dt { color: #a297ab; }
[data-theme-root].dark .yw-ads-page .yw-ads-ga-line[data-tone="bad"], [data-theme-root].dark .yw-ads-page .yw-ads-flag[data-tone="bad"] { color: #e69ac4; }
[data-theme-root].dark .yw-ads-page .yw-ads-table td { color: #c3b9cc; }
[data-theme-root].dark .yw-ads-page .yw-ads-table td strong { color: #f3eef8; }
/* money.css holds the sticky head's dark twin for Money and Pricing only. */
[data-theme-root].dark .yw-ads-page .yw-money-overflow > .yw-money-table thead th { background: #0d1527; }
[data-theme-root].dark .yw-ads-page .yw-money-overflow[data-scroll="list"] { scrollbar-color: #273656 transparent; }
[data-theme-root].dark .yw-ads-page .yw-ads-table th { color: #a297ab; }
[data-theme-root].dark .yw-ads-page .yw-ads-hero-rows > .yw-row-stat, [data-theme-root].dark .yw-ads-page .yw-ads-ga-stats > .yw-row-stat, [data-theme-root].dark .yw-ads-page .yw-ads-cpa, [data-theme-root].dark .yw-ads-page .yw-ads-child-table td { border-color: #1c2843; }
[data-theme-root].dark .yw-ads-page .yw-ads-campaign-table tr:not([data-ran]):not(.yw-ads-total):not(.yw-ads-subtotal):not(.yw-ads-children) .yw-ads-row-title { color: #a297ab; }
[data-theme-root].dark .yw-ads-page .yw-ads-cell[data-tipped]:hover .yw-ads-cell-value { color: #c5a8ff; }
[data-theme-root].dark .yw-ads-page .yw-ads-move { color: #a297ab; }
[data-theme-root].dark .yw-ads-page .yw-ads-move[data-tone="good"] { color: #7fd3b4; }
[data-theme-root].dark .yw-ads-page .yw-ads-move[data-tone="bad"] { color: #e889ad; }
[data-theme-root].dark .yw-ads-page .yw-ads-track[data-over] .yw-track-fill { background: repeating-linear-gradient(125deg, #e8687f 0 2px, #5a2a34 2px 4px); }
[data-theme-root].dark .yw-ads-page .yw-ads-track:not([data-over]) .yw-track-fill { background: repeating-linear-gradient(125deg, #4cc39a 0 2px, #1f4a3c 2px 4px); }
[data-theme-root].dark .yw-ads-page .yw-ads-pill { background: #142036; color: #f3eef8; }
[data-theme-root].dark .yw-ads-page .yw-ads-pill:hover { background: #1c2843; }
[data-theme-root].dark .yw-ads-page .yw-ads-link, [data-theme-root].dark .yw-ads-page .yw-ads-drill > summary { color: #c5a8ff; }
[data-theme-root].dark .yw-ads-page .yw-ads-flash { border-color: #1c2843; background: #0d1527; }
[data-theme-root].dark .yw-ads-page .yw-ads-flash[data-tone="bad"] { border-color: #5a3a48; background: #35262e; }
[data-theme-root].dark .yw-ads-page .yw-ads-swatch[data-platform="google"] { background: #a883ee; }
[data-theme-root].dark .yw-ads-page .yw-ads-swatch[data-platform="meta"] { background: #d4bdfa; }
[data-theme-root].dark .yw-ads-page .yw-ads-swatch[data-platform="tiktok"] { background: #e889ad; }
/* The chart, the chips and the grids on the dark card. */
[data-theme-root].dark .yw-ads-page .yw-ads-grid > i { background: #1c2843; }
[data-theme-root].dark .yw-ads-page .yw-ads-grid > i:first-child { background: #33405e; }
[data-theme-root].dark .yw-ads-page .yw-ads-col-value { color: #f3eef8; }
[data-theme-root].dark .yw-ads-page .yw-ads-col-return { color: #d9d2e3; }
[data-theme-root].dark .yw-ads-page .yw-ads-cols:not([data-dense]) .yw-ads-col-return { border-top-color: #1c2843; }
[data-theme-root].dark .yw-ads-page .yw-ads-axis-return { color: #a297ab; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-col-rev, .yw-ads-col-spend[data-alone], .yw-ads-key-rev, .yw-ads-key-spend[data-alone], .yw-ads-col-solo[data-platform="google"], .yw-ads-key-spend[data-platform="google"]) { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-col-spend:not([data-alone]), .yw-ads-key-spend:not([data-alone]):not([data-platform])) { background: repeating-linear-gradient(125deg, #a49eab 0 2px, #2b3856 2px 4px); }
[data-theme-root].dark .yw-ads-page .yw-ads-col-stack[data-series="spend"] .yw-ads-col-value { color: #c3b9cc; }
[data-theme-root].dark .yw-ads-page .yw-ads-col:is(:hover, :focus-visible) .yw-ads-col-spend:not([data-alone]) { box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-col-solo, .yw-ads-key-spend)[data-platform="meta"] { background: repeating-linear-gradient(125deg, #d4bdfa 0 2px, #4f4560 2px 4px); }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-col-solo, .yw-ads-key-spend)[data-platform="tiktok"] { background: repeating-linear-gradient(125deg, #e889ad 0 2px, #5a3346 2px 4px); }
[data-theme-root].dark .yw-ads-page .yw-ads-col-label { color: #a297ab; }
[data-theme-root].dark .yw-ads-page .yw-ads-col:is(:hover, :focus-visible) :is(.yw-ads-col-label, .yw-ads-col-return) { color: #f3eef8; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-col-tip, .yw-ads-tip), [data-theme-root].dark .yw-ads-page .yw-ads-heat-cell[data-tip]::after { border-color: #1c2843; background: #0d1527; box-shadow: 0 12px 30px #00000066, 0 2px 6px #00000033; color: #c3b9cc; }
/* 10/07 (owner: "remmeber these modals need to be translucent"): every hover
   card on the board is the house frosted glass, the period menu's and the
   Competitors modal's: the page shows through, softly blurred. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .yw-ads-page :is(.yw-ads-col-tip, .yw-ads-tip), .yw-ads-page .yw-ads-heat-cell[data-tip]::after { border-color: rgba(229, 221, 234, .9); background: rgba(253, 252, 254, .74); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
  [data-theme-root].dark .yw-ads-page :is(.yw-ads-col-tip, .yw-ads-tip), [data-theme-root].dark .yw-ads-page .yw-ads-heat-cell[data-tip]::after { background: rgba(13, 21, 39, .72); }
}
[data-theme-root].dark .yw-ads-page :is(.yw-ads-col-tip b, .yw-ads-tip b) { color: #f3eef8; }
[data-theme-root].dark .yw-ads-page .yw-ads-tip b[data-tone="good"] { color: #7fd3b4; }
[data-theme-root].dark .yw-ads-page .yw-ads-tip b[data-tone="bad"] { color: #f0b8d2; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-col-tip-period, .yw-ads-col-tip-parts) { color: #a297ab; }
[data-theme-root].dark .yw-ads-page .yw-ads-col-tip-figures { color: #c3b9cc; }
[data-theme-root].dark .yw-ads-page .yw-ads-heat-table thead th { color: #a297ab; }
[data-theme-root].dark .yw-ads-page .yw-ads-heat-cell, [data-theme-root].dark .yw-ads-page .yw-ads-heat-blank > i { border-color: #1c2843; background: repeating-linear-gradient(125deg, #17223a 0 2px, #0f1a30 2px 6px); box-shadow: none; color: #d8c8f2; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-heat-cell, .yw-ads-heat-ramp > i)[data-level="1"] { border-color: #2b2f55; background: #1b2142; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-heat-cell, .yw-ads-heat-ramp > i)[data-level="2"] { border-color: #3a3470; background: #262a58; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-heat-cell, .yw-ads-heat-ramp > i)[data-level="3"] { border-color: #4f3f8f; background: repeating-linear-gradient(125deg, #4a3a86 0 2px, #33306a 2px 5px); }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-heat-cell, .yw-ads-heat-ramp > i)[data-level="4"] { border-color: #7656c4; background: repeating-linear-gradient(125deg, #7a58cf 0 2px, #5a43a0 2px 5px); color: #f3eef8; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-heat-cell, .yw-ads-heat-ramp > i)[data-level="5"] { border-color: #9a74f0; background: repeating-linear-gradient(125deg, #9a6cf5 0 2px, #7c4fe0 2px 5px); color: #fff; }
[data-theme-root].dark .yw-ads-page .yw-ads-heat-table tbody th { color: #d9d2e3; }
[data-theme-root].dark .yw-ads-page .yw-ads-waffle-key > li { border-color: #1c2843; }
[data-theme-root].dark .yw-ads-page .yw-ads-waffle-key > li:is(:hover, :focus-visible) { background: #142036; }
[data-theme-root].dark .yw-ads-page .yw-ads-mix-name { color: #d9d2e3; }
[data-theme-root].dark .yw-ads-page .yw-ads-waffle-key > li > strong { color: #f3eef8; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone] { background: #2b3856; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="google"] { background: #a883ee; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="meta"] { background: #d4bdfa; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="tiktok"] { background: #e889ad; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="source-0"] { background: #a49eab; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="source-1"] { background: #7f798a; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-mix-name > i, .yw-ads-waffle-dots > i)[data-tone="source-2"] { background: #5d5868; }
[data-theme-root].dark .yw-ads-page .yw-ads-heat-table tbody th { color: #c3b9cc; }
[data-theme-root].dark .yw-ads-page .yw-ads-heat-cell { background: #131e34; color: #e6dcf7; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-heat-cell, .yw-ads-heat-ramp > i)[data-level="1"] { background: #3a3046; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-heat-cell, .yw-ads-heat-ramp > i)[data-level="2"] { background: #4a3a63; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-heat-cell, .yw-ads-heat-ramp > i)[data-level="3"] { background: #5f4785; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-heat-cell, .yw-ads-heat-ramp > i)[data-level="4"] { background: #7c5cc4; color: #fff; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-heat-cell, .yw-ads-heat-ramp > i)[data-level="5"] { background: #a883ee; color: #1d1626; }
[data-theme-root].dark .yw-ads-page .yw-ads-heat-cell[data-flag="alert"] { background: #46303c; color: #f0b8d2; }
[data-theme-root].dark .yw-ads-page .yw-ads-heat-cell[data-flag="watch"] { background: #3d3122; color: #e6bd7f; }
[data-theme-root].dark .yw-ads-page .yw-ads-heat-blank > i { background: #131e34; box-shadow: inset 0 0 0 1px #202d4a; }
[data-theme-root].dark .yw-ads-page .yw-ads-share { background: #142036; }
[data-theme-root].dark .yw-ads-page .yw-ads-share > i { background: repeating-linear-gradient(125deg, #a883ee 0 2px, #4a3a63 2px 4px); }
[data-theme-root].dark .yw-ads-page .yw-ads-table tr.yw-ads-total > td { border-top-color: #243352; background: #111b30; }
[data-theme-root].dark .yw-ads-page .yw-ads-table tr.yw-ads-subtotal > td { background: #0f182c; }
[data-theme-root].dark .yw-ads-page .yw-ads-table tr.yw-ads-subtotal:first-of-type > td, [data-theme-root].dark .yw-ads-page .yw-ads-table tr:not(.yw-ads-subtotal) + tr.yw-ads-subtotal > td { border-top-color: #243352; }
[data-theme-root].dark .yw-ads-page .yw-ads-child-table { background: #142036; }
[data-theme-root].dark .yw-ads-page .yw-ads-child-table td { color: #c3b9cc; }
[data-theme-root].dark .yw-ads-page .yw-ads-child-name { color: #f3eef8; }
[data-theme-root].dark .yw-ads-page .yw-ads-donut + .yw-ads-donut { border-color: #1c2843; }
[data-theme-root].dark .yw-ads-page .yw-ads-donut-svg path { stroke: #0d1527; }
[data-theme-root].dark .yw-ads-page .yw-ads-donut-hole { fill: #0d1527; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="google"] { fill: #a883ee; background: #a883ee; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="meta"] { fill: #d4bdfa; background: #d4bdfa; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="tiktok"] { fill: #e889ad; background: #e889ad; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="source-0"] { fill: #8f8996; background: #8f8996; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="source-1"] { fill: #6f6875; background: #6f6875; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="source-2"] { fill: #57515d; background: #57515d; }
[data-theme-root].dark .yw-ads-page :is(.yw-ads-donut-svg :is(path, circle), .yw-ads-legend i)[data-tone="other"] { fill: #22314f; background: #22314f; }
[data-theme-root].dark .hw-info-body .yw-ads-hover-defs li + li { border-color: #17243d; }

/* 10/06 lead pass: the connect wizard's frame (setup-flow.tsx) inside Ads.
   The 30px bold heading is the Dashboard's title weight; its instructions
   are the heading's hover (ads/page.tsx), so the lede is only the step. */
.yw-ads-page #setup-flow-heading { font-size: 28px; font-weight: 500; letter-spacing: -.8px; }
.yw-ads-page #setup-flow-heading .hw-info-label { font: inherit; letter-spacing: inherit; }
.yw-ads-page #setup-flow-heading + p { margin-top: 6px; color: #87818c; font-size: 13px; }
.yw-ads-wizard-aside { color: #87818c; font-size: 13px; }
[data-theme-root].dark .yw-ads-page #setup-flow-heading + p, [data-theme-root].dark .yw-ads-wizard-aside { color: #a297ab; }

/* 10/06 (owner: "lets move this notification to somewhere else it should not
   cover the whole screen"): a failed or late pull is one short line inside
   the Ad spend hero (AdsHeroAlert), under the figure it qualifies. */
.yw-ads-page .yw-ads-hero-alerts { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.yw-ads-page .yw-ads-hero-alert { display: flex; align-items: center; gap: 8px; margin: 0; color: #a96883; font-size: 13px; line-height: 1.4; }
.yw-ads-page .yw-ads-hero-alert[data-tone="accent"] { color: #7433d4; }
.yw-ads-page .yw-ads-hero-alert .yw-ads-notice-mark { width: 7px; height: 7px; }
.yw-ads-page .yw-ads-hero-alert[data-tone="accent"] .yw-ads-notice-mark { background: #7c3aed; }
.yw-ads-page .yw-ads-hero-alert .hw-info-label { min-width: 0; color: inherit; font-size: 13px; font-weight: 500; text-align: left; }
.yw-ads-page .yw-ads-hero-alert-move { flex-shrink: 0; margin-left: auto; color: #6b2fd0; font-size: 13px; font-weight: 500; text-decoration: none; }
.yw-ads-page .yw-ads-hero-alert-move:hover, .yw-ads-page .yw-ads-hero-alert-move:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
[data-theme-root].dark .yw-ads-page .yw-ads-hero-alert { color: #e69ac4; }
[data-theme-root].dark .yw-ads-page .yw-ads-hero-alert[data-tone="accent"] { color: #c5a8ff; }
[data-theme-root].dark .yw-ads-page .yw-ads-hero-alert-move { color: #c9b1ff; }

/* 10/07 (owner: "lets use this image for the background of this container",
   "and this one for dark mode", "it needs to have an animation like its
   moving around a bit like the ones in the dashboard"): the Ad spend hero
   wears the house dot wave (public/art/dot-wave.png, dot-wave-dark.png)
   behind its figures, strongest at the foot so the figures stay clear, and
   drifting slowly like the Dashboard's art (a long, eased, alternating
   move). Blended into the card (multiply on light, screen on dark) so only
   the dots show. Still under prefers-reduced-motion. */
.yw-ads-page .yw-ads-hero { position: relative; isolation: isolate; overflow: hidden; }
.yw-ads-page .yw-ads-hero::before {
  content: ""; position: absolute; inset: -14%; z-index: -1; pointer-events: none;
  background: url("/art/dot-wave.png") center 60% / cover no-repeat;
  opacity: .55; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .12) 38%, rgba(0, 0, 0, .75) 72%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .12) 38%, rgba(0, 0, 0, .75) 72%, #000 100%);
  animation: yw-ads-wave-drift 24s cubic-bezier(.45, .05, .55, .95) infinite alternate;
  will-change: transform;
}
@keyframes yw-ads-wave-drift {
  from { transform: translate3d(-3%, 2%, 0) scale(1.03) rotate(-1.2deg); }
  to { transform: translate3d(3%, -2.5%, 0) scale(1.09) rotate(1.2deg); }
}
[data-theme-root].dark .yw-ads-page .yw-ads-hero::before { background-image: url("/art/dot-wave-dark.png"); opacity: .7; mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) {
  .yw-ads-page .yw-ads-hero::before { animation: none; }
}
/* Framing: a portrait card shows a slice of the landscape wave; size it to
   the card's height and centre the slice on the band, a little stronger. */
.yw-ads-page .yw-ads-hero::before {
  background-size: auto 100%; background-position: 34% 55%; opacity: .78;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .3) 34%, rgba(0, 0, 0, .85) 70%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .3) 34%, rgba(0, 0, 0, .85) 70%, #000 100%);
}
[data-theme-root].dark .yw-ads-page .yw-ads-hero::before { opacity: .85; }
/* 10/07 (owner: "it needs to be zoomed out but the dots cant be that big"):
   more of the wave in view, so the dots read small: the picture is sized to
   about 1.7 times the card's width (not its height) and sits along the card's
   foot, the band sweeping across the lower half. */
.yw-ads-page .yw-ads-hero::before {
  inset: -6% -18%;
  background-size: 170% auto; background-position: 42% 100%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .35) 40%, #000 78%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .35) 40%, #000 78%);
}
/* The dark picture's bands sit in other corners: frame its lower-right band. */
[data-theme-root].dark .yw-ads-page .yw-ads-hero::before { background-position: 88% 100%; opacity: .95; }
/* 10/07 (owner: "the background image looks cut just remove the background of
   the image but not the dots"): both pictures are now dots on transparency
   (colour-to-alpha, public/art/*.png), so the dark one's own near-black
   ground no longer shows as a cut rectangle and no blend trick is needed. */
.yw-ads-page .yw-ads-hero::before { mix-blend-mode: normal; }
[data-theme-root].dark .yw-ads-page .yw-ads-hero::before { mix-blend-mode: normal; opacity: .9; }
/* 10/07 (owner: "on this part the dot animation should not be on the
   numbers it could be on the top right where it doesent cross any data or
   number"): the wave keeps to the card's top right corner, beside the title
   and over the space right of the spend figure, and fades out toward the
   left and down well before the figure, the pill, the alert line and the
   rows. Same pictures, same slow drift. */
.yw-ads-page .yw-ads-hero::before {
  inset: 0 0 auto auto; width: 56%; height: 150px;
  background-size: 260% auto; background-position: 70% 30%;
  -webkit-mask-image: radial-gradient(120% 115% at 100% 0%, #000 22%, rgba(0, 0, 0, .55) 45%, transparent 72%);
  mask-image: radial-gradient(120% 115% at 100% 0%, #000 22%, rgba(0, 0, 0, .55) 45%, transparent 72%);
  transform-origin: 100% 0%;
}
[data-theme-root].dark .yw-ads-page .yw-ads-hero::before { background-position: 88% 40%; }