/* The calm redesign (Oct 16, 2026): Ads (ads/). Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules (Motion; Calm and focus). Colours only from the tokens in styles.css. */

/* ---------- the top: one hero (cost per lead, last 7 days), four small tiles under it ---------- */
[data-screen="ads"] .ads-head { display: flex; flex-direction: column; gap: 12px; }
[data-screen="ads"] .ads-hero { position: relative; }
[data-screen="ads"] .ads-hero .hero-v { font-size: 3.25rem; }
[data-screen="ads"] .ads-hero.on .hero-n { color: var(--cta); }
[data-screen="ads"] .ads-hero .hero-a { position: absolute; top: 14px; right: 14px; margin: 0; }
[data-screen="ads"] .ads-hero .hero-k { padding-right: 52px; }
@media (min-width: 900px) { [data-screen="ads"] .ads-hero .hero-v { font-size: 4rem; } }
body.big-text [data-screen="ads"] .ads-hero .hero-v { font-size: 3.5rem; }
[data-screen="ads"] .ov-tiles.ov-tiles4, [data-screen="ads"] .ads-head > .tiles.ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { [data-screen="ads"] .ov-tiles.ov-tiles4, [data-screen="ads"] .ads-head > .tiles.ov-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
[data-screen="ads"] .ov-tiles4 .tile { padding: 12px 14px; border-radius: 16px; }
[data-screen="ads"] .ov-tiles4 .tn { font-size: 1.625rem; }

/* The goals line of the Google, LSA and All views: one quiet line and the icon. */
[data-screen="ads"] .ads-goals { display: flex; align-items: center; gap: 4px; max-width: none; margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--text-3); }
[data-screen="ads"] .ads-goals span { flex: 1; min-width: 0; }

/* The big title and its "?" sit on one row (the older rule made the title row vanish into its parent, which dropped the "?" under it). */
.has-side [data-screen="ads"].ads-screen > .st, [data-screen="ads"].ads-screen > .st { display: flex; }
[data-screen="ads"] > .under { margin-top: -10px; }

/* Icon buttons on the campaign header (its colour) and in an audience's row of buttons. */
[data-screen="ads"] .camp-head:not(.quiet) .camp-acts .ib { border-color: var(--on-pick); color: var(--on-pick); background: none; }
[data-screen="ads"] .camp-head:not(.quiet) .camp-acts .ib:hover { background: none; box-shadow: inset 0 0 0 1px var(--on-pick); }
[data-screen="ads"] .node-acts .ib, [data-screen="ads"] .ad-btns .ib { border-color: transparent; background: var(--surface-2); }
[data-screen="ads"] .ib[aria-busy="true"] { opacity: .5; }

/* An icon's name in the hero and the campaign's header opens below the button (above it would run under the card's top edge). */
[data-screen="ads"] .hero-a .ib[data-tip]::after, [data-screen="ads"] .camp-acts .ib[data-tip]::after { bottom: auto; top: calc(100% + 8px); }

/* Build new ads: the draft's state is one quiet line; the Page, phone and website open with a tap; Edit is a drawing. */
[data-screen="ads-builder"] .ab-top { gap: 2px; }
[data-screen="ads-builder"] .ab-state-line { margin: 0; font-size: .8125rem; color: var(--text-3); }
[data-screen="ads-builder"] .ab-acct-more > .more-s { min-height: 44px; padding: 0; }
[data-screen="ads-builder"] .ab-acct-more .more-b { padding: 0 0 8px; }
[data-screen="ads-builder"] .ab-edit { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; }
[data-screen="ads-builder"] .ab-edit .ic { width: 18px; height: 18px; }
[data-screen="ads"] .ads-goals { margin-top: -6px; }