/* The Google Ads page (portal/google-ads.js): the header, the states before the overview (connect with the data-use
   disclosure, the account picker, problems), the overview (EU banner, totals, the daily chart, the campaigns table),
   one campaign (settings and tabs) and the page's own dialogs and menus. The column chart and its tooltip come from
   tracking.css and dashboard.css. Colour only where it means something: the chart's blue, the status tones and the
   warning of the EU banner; everything else is the portal's greys. Dialogs live in <body>, so their variables are set
   on .gads-dialog too. Phones: tables become stacked cards (container queries), nothing scrolls sideways. */
:is(#page-google-ads,.gads-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-google-ads,.gads-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);
}

/* ── Header: the title and the account on the left; period, refresh, New campaign and the account menu on the right ── */
.gads-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;margin-bottom:24px}
.gads-head-copy{flex:1 1 320px;min-width:0}
#page-google-ads .gads-head h2{font-size:28px;line-height:1.15;letter-spacing:-.03em}
.gads-status{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:22px;margin-top:8px;color:var(--muted);font-size:13px;line-height:1.4}
.gads-status[hidden]{display:none}
.gads-account-line{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.gads-account-name{color:var(--text);font-weight:600;min-width:0;overflow-wrap:anywhere}
.gads-sep{color:var(--dim)}
.gads-mono{font-variant-numeric:tabular-nums}
.gads-head-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.gads-head-actions:empty{display:none}
.gads-period{width:180px}
.gads-period .v-control{display:flex;width:100%;min-height:40px;border-radius:10px}

/* ── Buttons ── */
.gads-btn,.gads-icon-button{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,scale .15s ease-out;-webkit-tap-highlight-color:transparent}
.gads-btn{gap:8px;padding:8px 14px}
.gads-btn svg,.gads-icon-button svg{width:16px;height:16px;flex:none}
.gads-btn svg{color:var(--muted)}
.gads-btn.is-primary{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.gads-btn.is-primary svg{color:currentColor}
.gads-btn.is-danger{border-color:var(--error-text);background:var(--error-text);color:var(--panel)}
.gads-btn.is-large{min-height:44px;padding:10px 18px;font-size:14px}
.gads-btn.is-small{min-height:32px;padding:4px 10px;border-radius:8px;font-size:12px}
.gads-btn.is-small svg{width:14px;height:14px}
.gads-btn:disabled,.gads-icon-button:disabled{opacity:.45;cursor:default}
.gads-btn .gads-out{width:12px;height:12px}
.gads-icon-button{width:40px;padding:0}
.gads-icon-button.is-small{position:relative;width:32px;min-height:32px;border-color:transparent;border-radius:8px;background:transparent;color:var(--muted)}
/* A 40 px hit area around a 32 px icon button. */
.gads-icon-button.is-small::after{content:'';position:absolute;inset:-4px}
.gads-icon-button.is-busy svg{opacity:.4}
@media(hover:hover){
  :is(.gads-btn,.gads-icon-button):hover:not(:disabled){background:var(--panel-2);border-color:var(--dim)}
  .gads-btn.is-primary:hover:not(:disabled){border-color:var(--accent-2);background:var(--accent-2)}
  .gads-btn.is-danger:hover:not(:disabled){filter:brightness(1.08);background:var(--error-text)}
  .gads-icon-button.is-small:hover:not(:disabled){border-color:transparent;background:var(--panel-2);color:var(--text)}
}
:is(.gads-btn,.gads-icon-button):focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
:is(.gads-btn,.gads-icon-button[aria-expanded="false"]):active:not(:disabled){scale:.97}
.gads-icon-button[aria-expanded="true"]{background:var(--panel-2);color:var(--text)}
/* A request in flight: the button keeps its size and shows a small ring before its label. */
.gads-btn.is-busy{cursor:progress}
.gads-btn.is-busy::before{content:'';width:12px;height:12px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.8}
.gads-text-button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 8px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gads-text-button svg{width:14px;height:14px;color:var(--muted)}
.gads-text-button:disabled{opacity:.45;cursor:default}
@media(hover:hover){.gads-text-button:hover:not(:disabled){background:var(--panel-2)}}
.gads-text-button:focus-visible{outline:2px solid var(--focus);outline-offset:0}
/* A value that opens its editor (a budget, a bid): text with a dotted underline. */
.gads-link{padding:0;border:0;background:none;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-decoration:underline dotted;text-decoration-color:var(--dim);text-underline-offset:3px;cursor:pointer}
@media(hover:hover){.gads-link:hover{text-decoration-style:solid;text-decoration-color:currentColor}}
.gads-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

/* ── Surfaces ── */
#gads-body{transition:opacity .2s}
#gads-body.is-refreshing{opacity:.55}
.gads-panel{min-width:0;padding:20px 24px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
:root[data-theme="light"] :is(.gads-panel,.gads-kpis,.gads-table-wrap){box-shadow:0 2px 5px rgba(24,24,24,.025)}
.gads-panel-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-bottom:16px}
#page-google-ads .gads-panel-head :is(h3,h4){font-size:14px;line-height:1.4;font-weight:600}
.gads-panel-head p{margin-top:2px;color:var(--muted);font-size:12px;line-height:1.4}
.gads-overview,.gads-detail-body{display:grid;gap:16px}
.gads-empty-note{color:var(--muted);font-size:13px;line-height:1.5}
.gads-notice{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:13px;line-height:1.5}
.gads-notice svg{width:16px;height:16px;flex:none;margin-top:1px}
.gads-note{margin-top:12px;color:var(--muted);font-size:12px}

/* Chips: neutral by default; a tone only where it means something. */
.gads-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);color:var(--muted);font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}
.gads-chip[data-tone="success"]{border-color:var(--success-border);background:var(--success-bg);color:var(--success-text)}
.gads-chip[data-tone="warning"]{border-color:var(--warning-border);background:var(--warning-bg);color:var(--warning-text)}
.gads-chip[data-tone="error"]{border-color:var(--error-border);background:var(--error-bg);color:var(--error-text)}
.gads-chip[data-tone="info"]{border-color:var(--gads-info-border);background:var(--gads-info-bg);color:var(--gads-info-text)}
/* A status: a dot in its tone, the label, the reason after it. */
.gads-state{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;min-width:0;color:var(--text);font-size:12px;line-height:1.45}
.gads-dot{position:relative;top:-1px;width:7px;height:7px;flex:none;align-self:center;border-radius:50%;background:var(--dim)}
.gads-state[data-tone="success"] .gads-dot{background:var(--success-text)}
.gads-state[data-tone="warning"] .gads-dot{background:var(--warning-text)}
.gads-state[data-tone="error"] .gads-dot{background:var(--error-text)}
.gads-state-reason{color:var(--muted)}
.gads-state-reason::before{content:'·';margin-right:6px;color:var(--dim)}
/* In a table row the reason gets a line of its own under the status, lined up with its text. */
.gads-table .gads-state-reason{flex-basis:100%;padding-left:13px}
.gads-table .gads-state-reason::before{content:none}
.gads-count{margin-left:6px;color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}

/* The status switch (role="switch"): on is the shared controls' blue, off a grey track. */
.gads-switch{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex:none;padding:2px;border:0;border-radius:999px;background:var(--gads-switch-off);cursor:pointer;transition:background-color .18s ease-out;-webkit-tap-highlight-color:transparent}
.gads-switch::after{content:'';position:absolute;inset:-12px -4px}
.gads-switch-thumb{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease-out)}
.gads-switch[aria-checked="true"]{background:var(--gads-switch-on)}
.gads-switch[aria-checked="true"] .gads-switch-thumb{transform:translateX(16px)}
.gads-switch:disabled{opacity:.45;cursor:default}
.gads-switch:focus-visible{outline:none;box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--focus)}
@media(hover:hover){.gads-switch:hover:not(:disabled){filter:brightness(.96)}}
@media(forced-colors:active){.gads-switch{border:1px solid ButtonText}.gads-switch[aria-checked="true"]{background:Highlight}}

/* ── States before the overview: an icon, what happened, what to do ── */
.gads-state-panel{display:flex;align-items:flex-start;gap:16px;padding:28px}
.gads-state-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--panel-2);color:var(--muted)}
.gads-state-icon svg{width:22px;height:22px}
.gads-state-panel[data-tone="warning"] .gads-state-icon{background:var(--warning-bg);color:var(--warning-text)}
.gads-state-panel[data-tone="error"] .gads-state-icon{background:var(--error-bg);color:var(--error-text)}
.gads-state-copy{min-width:0}
#page-google-ads .gads-state-copy h3{font-size:16px;line-height:1.3;font-weight:600}
.gads-state-copy > p{max-width:64ch;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5}
.gads-state-note{max-width:64ch;margin-top:8px;color:var(--muted);font-size:13px;line-height:1.5}
.gads-state-note a,.gads-connect-signup a,.gads-disclosure a{color:var(--text);text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:3px}
@media(hover:hover){:is(.gads-state-note,.gads-connect-signup,.gads-disclosure) a:hover{text-decoration-color:currentColor}}
.gads-state-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* Not connected: the promise and the button beside what Kreative can see and do (shown before the popup). */
.gads-connect{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:32px 40px;padding:32px 36px}
#page-google-ads .gads-connect h3{font-size:24px;line-height:1.2;letter-spacing:-.025em;font-weight:600}
.gads-connect-lead{max-width:52ch;margin-top:8px;color:var(--muted);font-size:14px;line-height:1.6}
.gads-promises{display:grid;gap:12px;margin:24px 0;padding:0;list-style:none}
.gads-promises li{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.45}
.gads-promises svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--success-text)}
.gads-connect-actions{display:flex;flex-wrap:wrap;gap:8px}
.gads-connect-signup{margin-top:16px;color:var(--muted);font-size:13px;line-height:1.5}
.gads-disclosure{padding:20px 22px;border-radius:12px;background:var(--panel-2)}
#page-google-ads .gads-disclosure h4{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;font-weight:600}
.gads-disclosure h4 svg{width:16px;height:16px;flex:none;color:var(--success-text)}
.gads-disclosure ul{display:grid;gap:8px;margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.5}

/* Choosing the ad account: one row per account. */
#page-google-ads .gads-picker h3{font-size:16px;line-height:1.3;font-weight:600}
.gads-picker-lead{max-width:64ch;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5}
.gads-account-list{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.gads-account{display:grid;gap:4px;width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s,border-color .15s}
.gads-account-main{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
/* A long account name without spaces (a domain, an id) wraps instead of pushing the page sideways on a phone. */
.gads-account-title{font-size:14px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.gads-account-meta{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.gads-account[aria-current="true"]{border-color:var(--text)}
.gads-account[aria-busy="true"]{opacity:.6}
.gads-account:disabled{cursor:default}
@media(hover:hover){.gads-account:hover:not(:disabled){background:var(--panel-2);border-color:var(--dim)}}
.gads-account:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}

/* ── The EU political ads banner: the one warning of the overview ── */
.gads-banner{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;padding:16px 20px;border:1px solid var(--warning-border);border-radius:12px;background:var(--warning-bg)}
.gads-banner-copy{position:relative;flex:1 1 360px;min-width:0;padding-left:28px}
.gads-banner-copy::before{content:'';position:absolute;left:0;top:1px;width:18px;height:18px;background:var(--warning-text);-webkit-mask:var(--icon-warning) center/contain no-repeat;mask:var(--icon-warning) center/contain no-repeat}
#page-google-ads .gads-banner h3{color:var(--warning-text);font-size:14px;line-height:1.4;font-weight:600}
.gads-banner p{max-width:72ch;margin-top:2px;color:var(--text);font-size:13px;line-height:1.5}
.gads-banner-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ── Totals: seven figures in one strip divided by hairlines. Narrower, cost (the one people look for first) takes two
   cells, so four or two columns fill every row. ── */
#gads-body{container:gads-body / inline-size}
.gads-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--line)}
/* Each tile spans three rows of the strip (label, figure, note) shared by subgrid, so a label that wraps to two lines
   in one tile keeps every figure of the row on the same line. */
.gads-kpi{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;row-gap:6px;min-width:0;padding:16px 18px;background:var(--panel)}
.gads-kpi dt{align-self:end}
@container gads-body (max-width:900px){
  .gads-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gads-kpi:first-child{grid-column:span 2}
}
@container gads-body (max-width:520px){
  .gads-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gads-kpi{padding:14px 16px}
}
.gads-kpi dt{color:var(--muted);font-size:12px;line-height:1.35}
.gads-kpi dd{margin:0}
.gads-kpi-value{font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gads-kpi-note{color:var(--muted);font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}

/* ── The daily chart: the metric switch beside its title ── */
.gads-columns{margin-top:4px}
#page-google-ads .k-segment{max-width:100%;overflow-x:auto;scrollbar-width:none}
#page-google-ads .k-segment::-webkit-scrollbar{display:none}
#page-google-ads .k-segment button{flex:none}
#page-google-ads .k-segment button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;box-shadow:none}
@media(max-width:680px){#page-google-ads .k-segment{display:inline-flex;width:auto}}
.gads-chart .gads-empty-note{padding:32px 0;text-align:center}

/* ── The campaigns: heading with the filter and search, then the table ── */
.gads-campaigns{margin-top:16px}
.gads-section-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-bottom:12px}
#page-google-ads .gads-section-head h3{font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.015em}
.gads-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-width:0}
.gads-filter button{display:inline-flex;align-items:baseline}
.gads-filter .gads-count{margin-left:6px}
.gads-search{position:relative;width:240px;max-width:100%}
.gads-search.is-wide{width:100%}
.gads-search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;color:var(--muted);transform:translateY(-50%);pointer-events:none}
.gads-search input{width:100%;min-height:40px;padding:8px 12px 8px 36px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:14px}
@media(hover:hover){.gads-search input:hover{border-color:var(--dim)}}
.gads-search input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
.gads-empty-filter{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:14px}

/* Tables: names on the left, numbers right-aligned in tabular figures; the switch and the menu at the ends. */
.gads-table-wrap{container:gads-table / inline-size;min-width:0;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.gads-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.4}
.gads-table thead th{padding:10px 8px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600;line-height:1.3;text-align:left;vertical-align:bottom;white-space:normal}
.gads-table thead th.is-num{text-align:right}
/* The name column keeps about a third of the row; the number columns share the rest, their headings on one line where
   they fit and wrapped where the language is longer. */
.gads-table thead th.gads-cell-name{width:32%}
.gads-table tbody :is(th,td){padding:12px 8px;border-bottom:1px solid var(--line);font-weight:400;text-align:left;vertical-align:middle}
.gads-table :is(th,td):first-child{padding-left:16px}
.gads-table :is(th,td):last-child{padding-right:8px}
.gads-table tbody tr:last-child :is(th,td){border-bottom:0}
.gads-table td.is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gads-table td.is-num small{display:block;margin-top:2px;color:var(--muted);font-size:12px;white-space:nowrap}
.gads-table td.is-num .gads-bidding{min-width:12ch;max-width:18ch;margin-left:auto;white-space:normal}
.gads-budget{white-space:nowrap}
.gads-per{color:var(--muted);font-size:12px}
.gads-table .gads-cell-switch{width:52px;padding-right:4px}
.gads-table .gads-cell-menu{width:44px;padding-left:0;text-align:right}
.gads-table .gads-cell-name{min-width:168px;padding-left:8px}
@media(hover:hover){.gads-table tbody tr:hover{background:var(--gads-row-hover)}}
.gads-name{display:block;max-width:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:14px;font-weight:600;line-height:1.35;text-align:left;overflow-wrap:anywhere;cursor:pointer}
@media(hover:hover){.gads-name:hover{text-decoration:underline;text-underline-offset:3px}}
.gads-name:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.gads-row-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:4px}
.gads-row-sub{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.45}
.gads-kw-text{display:block;font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.gads-cell-text{overflow-wrap:anywhere}
.gads-muted{color:var(--muted)}
.gads-qs{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.gads-table td.is-num .gads-qs small,.gads-qs small{display:inline;margin:0;color:var(--muted);font-weight:400}
.gads-qs[data-tone="success"]{color:var(--success-text)}
.gads-qs[data-tone="warning"]{color:var(--warning-text)}
.gads-qs[data-tone="error"]{color:var(--error-text)}
/* Sortable headings: the sorted column shows its arrow; the others darken under the pointer. */
.gads-sort{display:inline-flex;align-items:center;gap:4px;padding:2px 0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;transition:color .15s}
.gads-sort-icon{width:12px;height:12px;flex:none;transition:transform .2s}
.gads-sort.is-active{color:var(--text)}
.gads-sort[data-dir="asc"] .gads-sort-icon{transform:rotate(180deg)}
@media(hover:hover){.gads-sort:hover{color:var(--text)}}
.gads-sort:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
/* Narrow: each row a card — switch, name and menu on top, the numbers under it with their column names. */
@container gads-table (max-width:860px){
  .gads-table,.gads-table tbody{display:block}
  .gads-table thead{display:none}
  .gads-table tbody tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 16px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .gads-table tbody tr:last-child{border-bottom:0}
  .gads-table tbody :is(th,td),.gads-table tbody :is(th,td):is(:first-child,:last-child){padding:0;border:0}
  .gads-table .gads-cell-switch{order:1;width:auto;padding-top:2px}
  .gads-table .gads-cell-name{order:2;flex:1 1 calc(100% - 128px);min-width:0}
  .gads-table .gads-cell-menu{order:3;width:auto;margin:-4px -6px 0 0}
  .gads-table td[data-label]{order:4;flex:1 1 calc(25% - 16px);min-width:88px;text-align:left}
  .gads-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;color:var(--muted);font-size:12px;line-height:1.35;white-space:normal}
  .gads-table td.is-num .gads-bidding{margin-left:0}
  .gads-table td.is-num{white-space:normal}
}

.gads-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.5}

/* ── One campaign ── */
.gads-detail-top{margin-bottom:12px}
.gads-back{display:inline-flex;align-items:center;gap:4px;min-height:32px;margin-left:-6px;padding:4px 8px 4px 4px;border:0;border-radius:8px;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.gads-back svg{width:16px;height:16px}
@media(hover:hover){.gads-back:hover{background:var(--panel-2);color:var(--text)}}
.gads-back:focus-visible{outline:2px solid var(--focus);outline-offset:0}
.gads-detail-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;margin-bottom:16px}
.gads-detail-title{display:flex;align-items:center;gap:12px;min-width:0}
#page-google-ads .gads-detail-title h3{min-width:0;font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
.gads-detail-title h3:focus{outline:none}
.gads-detail-actions{display:flex;align-items:center;gap:8px}
.gads-detail-meta{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding-left:48px}
.gads-detail-meta .gads-state{font-size:13px}
/* Every reason Google gives, on a line of their own under the status, dotted between them. */
.gads-reasons{display:flex;flex-basis:100%;flex-wrap:wrap;gap:2px 8px;margin:0;padding:0;list-style:none;color:var(--muted);font-size:13px;line-height:1.45}
.gads-reasons li + li::before{content:'·';margin-right:8px;color:var(--dim)}
.gads-detail-head + .gads-kpis{margin-bottom:16px}

/* Settings: label, value, the way to change it. */
.gads-settings{margin-bottom:24px}
.gads-settings-list{margin:0}
.gads-setting{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) auto;align-items:start;gap:4px 24px;padding:12px 0;border-top:1px solid var(--line)}
.gads-setting:first-child{border-top:0;padding-top:0}
.gads-setting:last-child{padding-bottom:0}
.gads-setting dt{color:var(--muted);font-size:13px;line-height:1.5}
.gads-setting dd{margin:0;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.gads-setting dd small{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.45}
.gads-setting .gads-text-button{margin:-4px -8px 0 0}
.gads-setting-gap{width:1px}
.gads-warn-text{color:var(--warning-text)!important}
.gads-settings .gads-notice{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

/* Tabs with their counts; the chosen one underlined. */
.gads-tabs{display:flex;gap:4px;margin-bottom:16px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.gads-tabs::-webkit-scrollbar{display:none}
.gads-tabs [role="tab"]{position:relative;display:inline-flex;align-items:baseline;flex:none;min-height:40px;padding:10px 12px;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:color .15s}
.gads-tabs [role="tab"]::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:transparent;transition:background-color .15s}
.gads-tabs [role="tab"][aria-selected="true"]{color:var(--text)}
.gads-tabs [role="tab"][aria-selected="true"]::after{background:var(--text)}
@media(hover:hover){.gads-tabs [role="tab"]:hover{color:var(--text)}}
.gads-tabs [role="tab"]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:6px}
.gads-tabpanel:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
.gads-tabpanel[hidden]{display:none}
.gads-panel-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-bottom:12px}
.gads-panel-tools > p{max-width:60ch;color:var(--muted);font-size:13px;line-height:1.5}
.gads-panel-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.gads-group-filter{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.gads-group-filter .v-control{min-height:40px;border-radius:10px;max-width:240px}

/* Ads: a card each, with a preview in the page's own neutral look (not Google's). */
.gads-ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px;margin:0;padding:0;list-style:none}
.gads-ad{display:grid;align-content:start;gap:12px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.gads-ad-head{display:flex;align-items:flex-start;gap:12px}
.gads-ad-head .gads-switch{margin-top:2px}
.gads-ad-title{display:grid;gap:2px;flex:1;min-width:0}
.gads-ad-group{font-size:13px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.gads-ad-actions{display:flex;align-items:center;gap:4px;flex:none}
.gads-preview{display:grid;gap:4px;min-width:0;padding:14px 16px;border-radius:10px;background:var(--bg)}
:root[data-theme="light"] .gads-preview{background:#fafaf8;box-shadow:inset 0 0 0 1px var(--line)}
.gads-preview-url{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:12px;line-height:1.4}
.gads-preview-tag{flex:none;padding:0 6px;border:1px solid var(--line);border-radius:4px;color:var(--text);font-weight:600}
.gads-preview-host{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gads-preview-title{font-size:16px;line-height:1.35;font-weight:600;overflow-wrap:anywhere}
.gads-preview-text{color:var(--muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.gads-ad-chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.gads-ad-count{color:var(--muted);font-size:12px}
/* Cells at least as wide as the longest label ("Reklāmguvumi", "Кликабельность"); a narrow card wraps to a second row
   instead of breaking a word in two. */
.gads-ad-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px;margin:0;padding-top:12px;border-top:1px solid var(--line)}
/* Labels may wrap; the figures line up at the foot of their cells. */
.gads-ad-metrics div{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.gads-ad-metrics dt{color:var(--muted);font-size:12px;line-height:1.35;overflow-wrap:break-word}
.gads-ad-metrics dd{margin:2px 0 0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}

/* Negative keywords: a plain list with a remove button each. */
.gads-negatives{display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.gads-negatives li{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 8px 6px 16px;border-top:1px solid var(--line)}
.gads-negatives li:first-child{border-top:0}
.gads-negatives .gads-kw-text{flex:1;min-width:0;font-weight:400}
.gads-negatives .gads-icon-button{margin-left:auto}

/* ── Menus: a popover under their button ── */
.gads-menu{position:fixed;inset:auto;margin:0;min-width:200px;max-width:min(320px,calc(100vw - 16px));padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 32px #0003}
.gads-menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:36px;padding:8px 12px;border:0;border-radius:7px;background:none;color:var(--text);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.gads-menu-item.is-danger{color:var(--error-text)}
.gads-menu-item:disabled{opacity:.45;cursor:default}
.gads-menu-item svg{width:12px;height:12px;color:var(--muted)}
.gads-menu-item:focus-visible{outline:none;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--focus)}
@media(hover:hover){.gads-menu-item:hover:not(:disabled){background:var(--panel-2)}}
.gads-menu-sep{height:1px;margin:4px 8px;background:var(--line)}
@media(max-width:560px){.gads-menu-item{min-height:44px}}
.gads-out{width:12px;height:12px;flex:none}

/* ── Skeletons in the shape of what replaces them ── */
.gads-sk{position:relative;display:block;height:12px;overflow:hidden;border-radius:6px;background:var(--panel-2)}
.gads-sk-status{width:280px;max-width:100%;height:14px}
.gads-skeleton{display:grid;gap:16px}
.gads-skeleton .gads-kpi{gap:12px}
.gads-sk-value{width:62%;height:22px}
.gads-sk-bars{display:flex;align-items:flex-end;gap:6px;height:180px;margin-top:20px}
.gads-sk-bars .gads-sk{flex:1;border-radius:4px 4px 0 0}
.gads-sk-rows{padding:4px 20px}
.gads-sk-row{display:grid;grid-template-columns:40px 2fr repeat(3,1fr);align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.gads-sk-row:last-child{border-bottom:0}
.gads-sk-settings .gads-sk-row{grid-template-columns:160px 1fr}
.gads-sk-switch{width:36px;height:20px;border-radius:999px}
.gads-sk-head{display:flex;align-items:center;gap:12px}
.gads-sk-title{width:40%;height:24px}
.gads-sk-list{display:grid;gap:8px;margin-top:16px}
.gads-sk-list .gads-sk{height:56px;border-radius:10px}

/* ── Dialogs (in <body>): a head, a scrolling body, the buttons at the foot ── */
.gads-dialog{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);box-shadow:0 24px 70px #0005}
.gads-dialog.is-wide{width:min(760px,calc(100% - 24px))}
.gads-dialog.is-editor{width:min(920px,calc(100% - 24px))}
.gads-dialog[open]{display:flex;flex-direction:column;animation:dialog-in .22s cubic-bezier(.2,.8,.2,1)}
.gads-dialog::backdrop{background:#0009}
.gads-dialog[open]::backdrop{animation:backdrop-in .22s ease-out}
.gads-dialog-form{display:flex;flex-direction:column;flex:1;min-height:0;max-height:calc(100dvh - 26px)}
.gads-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 0 24px}
.gads-dialog-head h2{font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.gads-dialog-head .gads-icon-button{border-color:transparent;background:transparent}
.gads-dialog-lead{margin-top:4px;padding:0 24px;color:var(--muted);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.gads-dialog-body{display:grid;align-content:start;gap:16px;flex:1;min-height:0;padding:20px 24px;overflow:auto;overscroll-behavior:contain}
.gads-dialog-text{font-size:14px;line-height:1.55}
.gads-dialog-text strong{font-weight:600;overflow-wrap:anywhere}
.gads-dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:16px 24px 20px;border-top:1px solid var(--line)}
.gads-dialog-actions [hidden]{display:none}
.gads-form-error,.gads-callout{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);font-size:13px;line-height:1.5}
.gads-form-error{margin:0 24px 0;border-color:var(--error-border);background:var(--error-bg);color:var(--error-text);font-weight:600}
.gads-form-error[hidden],.gads-callout[hidden]{display:none}
.gads-form-error::before,.gads-callout[data-tone]::before{content:'';flex:none;width:16px;height:16px;margin-top:2px;background:currentColor;-webkit-mask:var(--tone-icon) center/contain no-repeat;mask:var(--tone-icon) center/contain no-repeat}
.gads-form-error{--tone-icon:var(--icon-error)}
.gads-callout[data-tone="warning"]{--tone-icon:var(--icon-warning);border-color:var(--warning-border);background:var(--warning-bg);color:var(--warning-text)}
.gads-callout[data-tone="error"]{--tone-icon:var(--icon-error);border-color:var(--error-border);background:var(--error-bg);color:var(--error-text)}
.gads-callout[data-tone="success"]{--tone-icon:var(--icon-success);border-color:var(--success-border);background:var(--success-bg);color:var(--success-text)}
.gads-callout[data-tone="info"]{--tone-icon:var(--icon-success);border-color:var(--gads-info-border);background:var(--gads-info-bg);color:var(--gads-info-text)}
.gads-callout[data-tone="info"]::before{display:none}
.gads-plain-list{display:grid;gap:4px;max-height:200px;margin:0;padding:8px 12px 8px 28px;overflow:auto;border-radius:10px;background:var(--panel-2);font-size:13px;line-height:1.45}

/* Fields: the shared label and box (controls.css), a suffix for the currency or %, hints and errors under them. */
.gads-dialog .k-input{min-height:var(--control-h);background:var(--panel)}
.gads-dialog .v-control,.gads-dialog .v-date-trigger{display:flex;width:100%;min-height:var(--control-h)}
.gads-field{min-width:0}
.gads-input{position:relative}
.gads-input.has-suffix .k-input{padding-right:44px}
.gads-input-suffix{position:absolute;right:12px;top:50%;color:var(--muted);font-size:13px;transform:translateY(-50%);pointer-events:none}
.gads-field-hint{color:var(--muted);font-size:12px;line-height:1.5}
/* How a typed amount will be read ("Saglabās: 1500,00 €"), or why it cannot be. */
.gads-field-echo{color:var(--muted);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
.gads-field-echo[data-tone="warning"]{color:var(--warning-text);font-weight:600}
.gads-field-error{color:var(--error-text);font-size:12px;font-weight:600;line-height:1.45}
.gads-field-error[hidden]{display:none}
.has-error .k-input,.has-error.gads-line .k-input{border-color:var(--error-text)}
.gads-field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 16px}
.gads-static p{font-size:14px;line-height:1.5}
.gads-static-label{display:block;margin-bottom:4px;color:var(--muted);font-size:12px;font-weight:600}
.gads-textarea{min-height:140px;resize:vertical;font-family:inherit;line-height:1.5}
/* Choices: one card per option; the chosen one outlined, its own fields under it. */
.gads-choices{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.gads-choices legend{margin-bottom:8px;padding:0;color:var(--muted);font-size:12px;font-weight:600}
.gads-choice,.gads-check{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.gads-choice:has(input:checked){border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.gads-check:has(input:disabled){cursor:default}
.gads-choice input,.gads-check input{width:16px;height:16px;flex:none;margin:2px 0 0}
.gads-choice:has(input:focus-visible),.gads-check:has(input:focus-visible){border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
@media(hover:hover){:is(.gads-choice,.gads-check):hover:not(:has(input:checked)):not(:has(input:disabled)){border-color:var(--dim)}}
.gads-choice-body,.gads-check > span{display:grid;gap:2px;min-width:0}
.gads-choice-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:14px;font-weight:600;line-height:1.4}
:is(.gads-choice-body,.gads-check > span) small{color:var(--muted);font-size:13px;line-height:1.45}
.gads-choice-extra{display:grid;gap:12px;padding:4px 0 8px 42px}
.gads-choice-extra[hidden]{display:none}

/* Locations: what the campaign has (with what will change), then the search. */
.gads-loc-current h3{margin-bottom:8px;color:var(--muted);font-size:12px;font-weight:600}
.gads-loc-list{display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:10px}
.gads-loc,.gads-loc-empty{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:48px;padding:6px 8px 6px 12px;border-top:1px solid var(--line)}
.gads-loc:first-child,.gads-loc-empty{border-top:0}
.gads-loc-empty{color:var(--muted);font-size:13px}
.gads-loc-icon svg{display:block;width:16px;height:16px;color:var(--muted)}
.gads-loc-name{display:grid;flex:1;min-width:0;font-size:14px;line-height:1.4}
.gads-loc-name small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.gads-loc.is-removing .gads-loc-name{color:var(--muted);text-decoration:line-through}
.gads-loc .gads-icon-button,.gads-loc .gads-text-button{margin-left:auto}
.gads-error-text{color:var(--error-text)!important;font-weight:600}
.gads-loc-search{display:grid;gap:8px}
.gads-loc-search-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.gads-loc-search-head label{color:var(--muted);font-size:12px;font-weight:600}
.gads-loc-results{display:grid;gap:4px;max-height:240px;margin:0;padding:0;overflow:auto;list-style:none}
.gads-loc-result{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.gads-loc-result:disabled{opacity:.55;cursor:default}
@media(hover:hover){.gads-loc-result:hover:not(:disabled){background:var(--panel-2);border-color:var(--dim)}}
.gads-loc-result:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
.gads-loc-add{flex:none;font-size:12px;font-weight:600}

/* Keywords: the lines, a live preview of how Google reads them, then what was added and refused. */
.gads-kw-editor,.gads-kw-outcome{display:grid;gap:16px}
.gads-kw-editor[hidden],.gads-kw-outcome[hidden]{display:none}
.gads-kw-preview{display:grid;gap:8px}
.gads-kw-summary{color:var(--muted);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.gads-kw-summary:empty{display:none}
.gads-kw-summary[data-tone="error"]{color:var(--error-text)}
.gads-kw-list{display:grid;gap:0;max-height:220px;margin:0;padding:0;overflow:auto;list-style:none;border:1px solid var(--line);border-radius:10px}
.gads-kw-list:empty{display:none}
.gads-kw-list li{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;padding:8px 12px;border-top:1px solid var(--line);font-size:13px}
.gads-kw-list li:first-child{border-top:0}
.gads-kw-list .gads-kw-text{font-size:13px}
.gads-kw-match{color:var(--muted);font-size:12px}
.gads-kw-problem{flex-basis:100%;color:var(--error-text);font-size:12px;font-weight:600}
.gads-kw-list li[data-tone="error"] .gads-kw-text{color:var(--error-text)}
.gads-kw-list.is-result{max-height:260px}
.gads-kw-more{color:var(--muted)}
.gads-outcome-title{font-size:14px;font-weight:600}
.gads-policy{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--warning-border);border-radius:10px;background:var(--warning-bg);font-size:13px;line-height:1.5}
.gads-policy[hidden]{display:none}
.gads-policy h3{color:var(--warning-text);font-size:14px;font-weight:600}
.gads-policy .gads-btn{justify-self:start}
.gads-chips{display:flex;flex-wrap:wrap;gap:6px}

/* The ad editor: the fields beside a preview that follows them; on narrow screens the preview comes first. */
.gads-ad-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:start;gap:24px}
.gads-ad-fields{display:grid;gap:20px;min-width:0}
.gads-ad-side{position:sticky;top:0;display:grid;gap:8px;min-width:0}
.gads-side-label{color:var(--muted);font-size:12px;font-weight:600}
.gads-paths,.gads-lines{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
:is(.gads-paths,.gads-lines) legend{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;margin-bottom:8px;padding:0;color:var(--muted);font-size:12px;font-weight:600}
.gads-lines-count{font-weight:400;font-variant-numeric:tabular-nums}
.gads-path-row{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:13px}
.gads-path-row > span{padding-top:9px}
.gads-path-host{flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gads-path-part{display:grid;gap:4px;flex:1;min-width:0}
.gads-line-list{display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:gads-line}
.gads-line{display:grid;gap:4px;min-width:0}
.gads-line-row{display:flex;align-items:flex-start;gap:8px}
.gads-line-row .k-input{flex:1;min-width:0}
textarea.gads-line-input{min-height:60px;resize:vertical;font-family:inherit;line-height:1.45}
.gads-counter{flex:none;min-width:48px;padding-top:9px;color:var(--muted);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.gads-counter.is-over{color:var(--error-text);font-weight:600}
.gads-line-row .gads-icon-button{margin-top:2px}
.gads-pin{display:flex}
.gads-lines > .gads-text-button{justify-self:start;margin-left:-8px}

/* ── Motion: skeletons shimmer, views rise in; nothing moves for reduced motion ── */
@media(prefers-reduced-motion:no-preference){
  .gads-sk::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 7%,transparent),transparent);transform:translateX(-100%);animation:gads-shimmer 1.6s ease-in-out infinite}
  .gads-btn.is-busy::before{animation:gads-spin .7s linear infinite}
  #gads-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}
}
@keyframes gads-shimmer{to{transform:translateX(100%)}}
@keyframes gads-spin{to{transform:rotate(360deg)}}
@keyframes gads-rise{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){
  :is(.gads-btn,.gads-icon-button,.gads-switch,.gads-switch-thumb,.gads-sort-icon,#gads-body){transition:none}
  :is(.gads-btn,.gads-icon-button):active:not(:disabled){scale:none}
}

/* ── Narrower screens ── */
@media(max-width:1000px){
  .gads-connect{grid-template-columns:minmax(0,1fr);padding:28px}
  .gads-setting{grid-template-columns:minmax(0,1fr) auto}
  .gads-setting dt{grid-column:1/-1}
  .gads-setting dd{grid-column:1}
  .gads-setting > :last-child{grid-column:2;grid-row:2}
}
@media(max-width:760px){
  .gads-ad-editor{grid-template-columns:minmax(0,1fr)}
  .gads-ad-side{position:static;order:-1}
}
@media(max-width:700px){
  .gads-head{align-items:stretch}
  .gads-head-actions{width:100%}
  .gads-period{flex:1 1 140px;width:auto}
  .gads-panel{padding:16px}
  .gads-state-panel{padding:20px}
  .gads-connect{padding:20px}
  .gads-banner{padding:14px 16px}
  .gads-tools,.gads-search{width:100%}
  .gads-detail-meta{padding-left:0}
  .gads-detail-title{gap:8px}
  #page-google-ads .gads-detail-title h3{font-size:20px}
  /* The actions ("Open Google Ads", the menu) get their own row, so the campaign's name keeps the width. */
  .gads-detail-head{grid-template-columns:minmax(0,1fr)}
  .gads-detail-actions{justify-self:start;flex-wrap:wrap}
  .gads-dialog-head{padding:16px 12px 0 16px}
  .gads-dialog-lead{padding:0 16px}
  .gads-dialog-body{padding:16px}
  .gads-form-error{margin:0 16px}
  .gads-dialog-actions{padding:12px 16px 16px}
  .gads-choice-extra{padding-left:0}
}
/* Phones: "New campaign" keeps its name for screen readers but shows only its icon, so the row fits. */
@media(max-width:480px){
  .gads-new{width:40px;padding:0}
  .gads-new span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .gads-state-panel{flex-direction:column}
  .gads-dialog-actions .gads-btn{flex:1 1 auto}
  /* The chart's metric switch wraps rather than hiding its last choices past the edge. */
  .gads-chart .k-segment{flex-wrap:wrap;overflow-x:visible}
}