/* The Meta Ads page (portal/meta-ads.js) and its create flow (portal/meta-ads-wizard.js). Both wear the Google Ads page's
   look: its gads-* classes (google-ads.css) and the wizard's gw-* classes (google-ads-wizard.css), so the two ad pages
   read as one design. This file adds only what those scope to #page-google-ads, and what Meta's ads have of their own: a
   creative's text and picture, the post picker, the picture upload and the preview. No Meta, Facebook or Instagram marks
   or colours: neutral surfaces, colour only where it means something. */
:is(#page-meta-ads,.mads-dialog){
  --viz-1:#2a78d6; --viz-grid:#e8e7e1; --viz-base:#c3c2b7;
  --gads-switch-on:#246df0; --gads-switch-off:#c4c4c0;
  --gads-info-text:#1d5fb0; --gads-info-bg:#ebf3fd; --gads-info-border:#c4dbf6;
  --gads-row-hover:color-mix(in srgb,var(--text) 3%,transparent);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
:root[data-theme="dark"] :is(#page-meta-ads,.mads-dialog){
  --viz-1:#3987e5; --viz-grid:#343a46; --viz-base:#4a5160;
  --gads-switch-on:#3d80f5; --gads-switch-off:#5b6372;
  --gads-info-text:#9cc3ff; --gads-info-bg:#1f2e45; --gads-info-border:#2f4a70;
  --gads-row-hover:color-mix(in srgb,var(--text) 4%,transparent);
}

/* What google-ads.css says for #page-google-ads / #gads-body, said for this page too. */
#page-meta-ads .gads-head h2{font-size:28px;line-height:1.15;letter-spacing:-.03em}
#mads-body{container:gads-body / inline-size;transition:opacity .2s}
#mads-body.is-refreshing{opacity:.55}
#page-meta-ads .gads-panel-head :is(h3,h4){font-size:14px;line-height:1.4;font-weight:600}
#page-meta-ads .gads-state-copy h3{font-size:16px;line-height:1.3;font-weight:600}
#page-meta-ads .gads-connect h3{font-size:24px;line-height:1.2;letter-spacing:-.025em;font-weight:600}
#page-meta-ads .gads-disclosure h4{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;font-weight:600}
#page-meta-ads .gads-picker h3{font-size:16px;line-height:1.3;font-weight:600}
#page-meta-ads .gads-banner h3{color:var(--warning-text);font-size:14px;line-height:1.4;font-weight:600}
#page-meta-ads .k-segment{max-width:100%;overflow-x:auto;scrollbar-width:none}
#page-meta-ads .k-segment::-webkit-scrollbar{display:none}
#page-meta-ads .k-segment button{flex:none}
#page-meta-ads .k-segment button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;box-shadow:none}
@media(max-width:680px){#page-meta-ads .k-segment{display:inline-flex;width:auto}}
#page-meta-ads .gads-section-head h3{font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.015em}
#page-meta-ads .gads-detail-title h3{min-width:0;font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
@media(max-width:700px){#page-meta-ads .gads-detail-title h3{font-size:20px}}
@media(prefers-reduced-motion:no-preference){
  #mads-body.is-entering > :is(.gads-overview,.gads-detail-head,.gads-state-panel,.gads-connect,.gads-picker,.gads-skeleton){animation:gads-rise .32s var(--ease-out) both}
}
@media(prefers-reduced-motion:reduce){#mads-body{transition:none}}

/* Totals: six figures (seven with a campaign's result) share the strip; cost comes first. */
.mads-kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr))}
/* Narrower: three or two columns; a last tile alone on its row takes the whole row, so no empty cell shows. */
@container gads-body (max-width:900px){
  .mads-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mads-kpis .gads-kpi:first-child{grid-column:auto}
  .mads-kpis .gads-kpi:last-child:nth-child(3n+1){grid-column:1/-1}
  .mads-kpis .gads-kpi:last-child:nth-child(3n+2){grid-column:span 2}
}
@container gads-body (max-width:520px){
  .mads-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mads-kpis .gads-kpi:last-child:is(:nth-child(3n+1),:nth-child(3n+2)){grid-column:auto}
  .mads-kpis .gads-kpi:last-child:nth-child(odd){grid-column:1/-1}
}
#page-meta-ads .gads-detail-meta .gads-muted{font-size:13px}

/* An ad: its text and picture in the page's own neutral look (not Meta's). */
.mads-creative{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;min-width:0;padding:12px;border-radius:10px;background:var(--bg)}
:root[data-theme="light"] .mads-creative{background:#fafaf8;box-shadow:inset 0 0 0 1px var(--line)}
.mads-creative:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.mads-creative-image{width:72px;height:72px;border-radius:8px;object-fit:cover;background:var(--panel-2)}
.mads-creative-copy{display:grid;gap:4px;min-width:0}
.mads-creative-body{font-size:13px;line-height:1.5;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mads-creative-title{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.mads-creative-cta{justify-self:start;display:inline-flex;align-items:center;min-height:28px;padding:2px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--text);font-size:12px;font-weight:600;white-space:nowrap}

/* The create flow's own parts. */
.mads-wizard .gw-ad-form{display:grid;gap:20px;align-content:start}
.mads-wizard .mads-indent{margin:12px 0 0 28px}
.mads-wizard .mads-tight{margin-top:16px}
.mads-wizard .gw-section.mads-tight{padding-top:0;border-top:0}
.mads-wizard .mads-row{grid-template-columns:repeat(3,minmax(0,1fr))}
@container gw-body (max-width:520px){.mads-wizard .mads-row{grid-template-columns:minmax(0,1fr)}.mads-wizard .mads-indent{margin-left:0}}
.mads-confirm{margin-top:12px;background:var(--panel);color:var(--text)}
.mads-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.mads-post .gw-card-text{gap:6px}
.mads-post.is-disabled{opacity:.6;cursor:default}
.mads-post-image{width:100%;aspect-ratio:1.6;border-radius:8px;object-fit:cover;background:var(--panel-2)}
.mads-post-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;color:var(--text)}
.mads-upload{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.mads-upload-preview{width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--panel-2)}
.mads-upload .gw-button{cursor:pointer}
.mads-upload:has(input:focus-visible) .gw-button{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
.mads-preview{gap:8px}
.mads-preview-message{color:var(--text);white-space:pre-line;overflow-wrap:anywhere}
.mads-preview-image{display:block;width:100%;aspect-ratio:1.91;border-radius:8px;object-fit:cover;background:var(--panel-2)}
.mads-preview-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.mads-preview-foot > span:first-child{display:grid;gap:2px;min-width:0}