/**
 * CyMetricA Ads — dashboard design system (Phase 4.8.0).
 *
 * One stylesheet for every frontend account surface (advertiser / publisher /
 * amplifier registers, logins and dashboards). Enqueued conditionally by
 * Ui\Components::maybe_enqueue() — only on pages rendering a dashboard shortcode.
 *
 * Everything keys off the CSS custom properties on .cym-ads-app, so the brand
 * palette is a one-place edit. Surfaces inherit the theme's font-family on
 * purpose (they render inside theme pages); size, spacing, color and borders
 * are normalised here.
 *
 * Component index:
 *   .cym-ads-app             scope wrapper + tokens
 *   .cym-ads-notice          alerts (--success | --error | --info modifiers use
 *                            the legacy -success/-error/-info suffixes)
 *   .cym-ads-dash-nav        dashboard header nav
 *   .cym-ads-summary-*       stat/KPI card grid
 *   .cym-ads-table           data table (+ .cym-ads-num right-align)
 *   .cym-ads-status-*        status badges
 *   .cym-ads-cta             buttons (secondary/danger variants + link-danger)
 *   forms                    field kit (.cym-ads-field, form classes, .description)
 *   .cym-ads-option-*        selectable option-card grids (audience/channel pickers)
 *   .cym-ads-dashboard-empty empty state
 *   .cym-ads-code            code/snippet blocks
 *   .cym-ads-estimate        dashed live-estimate box (campaign wizard)
 *   .cym-ads-checkout-summary checkout gross-up table
 *   .cym-ads-funnel-*        single-funnel account CTA (replaces the legacy order form)
 *   .cym-ads-billing-*       invoice/receipt list
 *   .cym-ads-chart-*         inline-SVG area chart (+ its "view as table" fallback)
 *   .cym-ads-bars-*          horizontal comparison bars
 */

/* Tokens live on :root too so components rendered outside a .cym-ads-app wrapper
   (early-return notices, third-party embeds of our shortcodes) still resolve. */
:root,
.cym-ads-app {
	/* Brand — placeholder palette (travel green + savanna amber); swap on brand review. */
	--cym-primary:      #1a7a4a;
	--cym-primary-dark: #14603a;
	--cym-primary-ink:  #ffffff;
	--cym-accent:       #d97706;
	--cym-danger:       #b32d2e;
	--cym-danger-bg:    #fcf0f1;
	--cym-success:      #1e7e34;
	--cym-success-bg:   #edfaef;
	--cym-info:         #2271b1;
	--cym-info-bg:      #f0f6fc;
	--cym-warn:         #996800;
	--cym-warn-bg:      #fcf9e8;
	/* Neutrals */
	--cym-ink:          #1d2327;
	--cym-ink-muted:    #646970;
	--cym-border:       #dcdcde;
	--cym-surface:      #ffffff;
	--cym-surface-alt:  #f6f7f7;
	/* Type scale (family inherited from the theme) */
	--cym-fs-micro:     11px;
	--cym-fs-small:     12px;
	--cym-fs-table:     13px;
	--cym-fs-body:      15px;
	--cym-fs-stat:      24px;
	/* Shape + rhythm */
	--cym-radius:       6px;
	--cym-gap:          12px;
}
/* Base text styles apply only inside the app scope — never to :root. */
.cym-ads-app {
	color: var(--cym-ink);
	font-size: var(--cym-fs-body);
	line-height: 1.5;
}
.cym-ads-app *,
.cym-ads-app *::before,
.cym-ads-app *::after {
	box-sizing: border-box;
}
.cym-ads-app h2,
.cym-ads-app h3,
.cym-ads-app h4 {
	color: var(--cym-ink);
	line-height: 1.25;
}
.cym-ads-app a {
	color: var(--cym-primary);
}
.cym-ads-app a:hover,
.cym-ads-app a:focus {
	color: var(--cym-primary-dark);
}

/* Utility */
.cym-ads-muted {
	color: var(--cym-ink-muted);
}
.cym-ads-inline-form {
	display: inline;
	margin: 0;
}
.cym-ads-section-divider {
	border: 0;
	border-top: 1px solid var(--cym-border);
	margin: calc(var(--cym-gap) * 2) 0;
}
.cym-ads-section {
	margin-bottom: calc(var(--cym-gap) * 2);
}

/* ---------- Notices ---------- */

.cym-ads-notice {
	padding: 10px 14px;
	margin: 0 0 var(--cym-gap);
	border: 1px solid var(--cym-border);
	border-left-width: 4px;
	border-radius: var(--cym-radius);
	background: var(--cym-surface-alt);
	font-size: var(--cym-fs-body);
}
.cym-ads-notice-success {
	border-left-color: var(--cym-success);
	background: var(--cym-success-bg);
}
.cym-ads-notice-error {
	border-left-color: var(--cym-danger);
	background: var(--cym-danger-bg);
}
.cym-ads-notice-info {
	border-left-color: var(--cym-info);
	background: var(--cym-info-bg);
}
.cym-ads-notice code {
	font-size: var(--cym-fs-micro);
	word-break: break-all;
}

/* ---------- Dashboard shell: left sidebar + content ---------- */

/* The nav is the first child of .cym-ads-app and everything else follows it, so the
   two-column shell is done entirely in CSS — no surface had to change its markup.
   Explicit placement (rather than auto-flow) is what makes that work: the nav spans
   every row in column 1, and ALL other children — flash notices included — land in
   column 2 in document order. */
.cym-ads-app:has(> .cym-ads-dash-nav) {
	display: grid;
	grid-template-columns: 216px minmax(0, 1fr);
	gap: calc(var(--cym-gap) * 2);
	align-items: start;
}
.cym-ads-app > .cym-ads-dash-nav {
	grid-column: 1;
	grid-row: 1 / -1;
	position: sticky;
	top: var(--cym-gap);
}
.cym-ads-app:has(> .cym-ads-dash-nav) > *:not(.cym-ads-dash-nav) {
	grid-column: 2;
	min-width: 0; /* let wide tables scroll inside the column instead of stretching it */
}

/* ---------- Dashboard nav (vertical in the shell) ---------- */

.cym-ads-dash-nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--cym-gap);
	padding: 14px;
	margin: 0 0 calc(var(--cym-gap) * 1.5);
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface);
}
.cym-ads-dash-nav__brand {
	font-weight: 600;
	color: var(--cym-ink);
}
.cym-ads-dash-nav__company {
	font-weight: 400;
	color: var(--cym-ink-muted);
}
.cym-ads-dash-nav__items {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cym-ads-dash-nav__link {
	display: block;
	padding: 9px 12px;
	border-radius: var(--cym-radius);
	color: var(--cym-ink-muted);
	text-decoration: none;
	font-size: var(--cym-fs-table);
}
/* Log out sits apart from the navigation proper. */
.cym-ads-dash-nav__link--logout {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--cym-border);
	border-radius: 0;
}
.cym-ads-dash-nav__brand {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cym-border);
	line-height: 1.3;
}
.cym-ads-dash-nav__company {
	display: block;
}
.cym-ads-dash-nav__link:hover,
.cym-ads-dash-nav__link:focus {
	color: var(--cym-primary-dark);
	background: var(--cym-surface-alt);
}
.cym-ads-dash-nav__link--active {
	color: var(--cym-primary-ink);
	background: var(--cym-primary);
}
.cym-ads-dash-nav__link--active:hover,
.cym-ads-dash-nav__link--active:focus {
	color: var(--cym-primary-ink);
	background: var(--cym-primary-dark);
}

/* Nested nav items — a section's children, shown only when that section is active.
 Indented and a size down so the hierarchy reads without a second set of colours. */
.cym-ads-dash-nav__link--child {
	padding-left: 26px;
	font-size: var(--cym-fs-small);
}
.cym-ads-dash-nav__link--child::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 1px;
	margin-right: 8px;
	vertical-align: middle;
	background: currentColor;
	opacity: .5;
}
/* Choice cards — the channel picker on the campaigns page. */
.cym-ads-choice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin: 12px 0;
}
.cym-ads-choice {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface);
	cursor: pointer;
}
.cym-ads-choice:hover { border-color: var(--cym-primary); }
.cym-ads-choice strong { display: block; margin: 6px 0 2px; }
.cym-ads-choice span { display: block; color: var(--cym-ink-muted); font-size: var(--cym-fs-small); }

/* ---------- Legibility on filled surfaces ----------
 4.28.0 — the owner reported the sidebar's active item and the empty-state button rendering
 as solid green blocks with NO visible text. The markup was fine: rendering the dashboard and
 reading the anchors back showed "Dashboard" and "+ New campaign" both present. So the label
 was there and the same colour as the block behind it.

 Our own rules already say white-on-green. They lose because a single class — `.cym-ads-cta`,
 specificity (0,1,0) — is beaten by any theme rule of the shape `.entry-content a`, (0,1,1),
 and our shortcodes render inside whatever wrapper the active theme puts around content.

 So: re-assert the ink on ANY filled surface, scoped tightly to the things that actually have
 a dark background. `!important` is deliberate here and only here. This is not styling
 preference losing an argument — it is a contrast guarantee on a control whose label is
 otherwise invisible, in a theme we do not control and cannot enumerate.
*/
.cym-ads-app .cym-ads-cta,
.cym-ads-app .cym-ads-cta:link,
.cym-ads-app .cym-ads-cta:visited,
.cym-ads-app .cym-ads-cta:hover,
.cym-ads-app .cym-ads-cta:focus,
.cym-ads-cta,
.cym-ads-cta:link,
.cym-ads-cta:visited,
.cym-ads-register-submit,
.cym-ads-app #wp-submit {
	color: var(--cym-primary-ink, #fff) !important;
}
/* The outline variant is light-on-white, so it keeps the brand colour for its text. */
.cym-ads-app .cym-ads-cta-secondary,
.cym-ads-app .cym-ads-cta-secondary:link,
.cym-ads-app .cym-ads-cta-secondary:visited,
.cym-ads-cta-secondary,
.cym-ads-cta-secondary:link,
.cym-ads-cta-secondary:visited {
	color: var(--cym-primary, #1a7a4a) !important;
}
.cym-ads-app .cym-ads-cta-secondary:hover,
.cym-ads-app .cym-ads-cta-secondary:focus,
.cym-ads-cta-secondary:hover,
.cym-ads-cta-secondary:focus {
	color: var(--cym-primary-dark, #14603a) !important;
}
.cym-ads-app .cym-ads-dash-nav__link--active,
.cym-ads-app .cym-ads-dash-nav__link--active:link,
.cym-ads-app .cym-ads-dash-nav__link--active:visited,
.cym-ads-app .cym-ads-dash-nav__link--active:hover,
.cym-ads-app .cym-ads-dash-nav__link--active:focus,
.cym-ads-dash-nav__link--active,
.cym-ads-dash-nav__link--active:link,
.cym-ads-dash-nav__link--active:visited {
	color: var(--cym-primary-ink, #fff) !important;
}
.cym-ads-app .cym-ads-cta-danger,
.cym-ads-cta-danger,
.cym-ads-cta-danger:link,
.cym-ads-cta-danger:visited {
	color: var(--cym-primary-ink, #fff) !important;
}

/* ---------- Stat / KPI cards ---------- */

.cym-ads-summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--cym-gap);
	margin: 0 0 var(--cym-gap);
}
.cym-ads-summary-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px;
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface);
}
.cym-ads-summary-label {
	font-size: var(--cym-fs-micro);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--cym-ink-muted);
}
.cym-ads-summary-value {
	font-size: var(--cym-fs-stat);
	font-weight: 600;
	line-height: 1.2;
	color: var(--cym-ink);
}
.cym-ads-summary-card small {
	font-size: var(--cym-fs-small);
	color: var(--cym-ink-muted);
}

/* Actions row under the cards */
.cym-ads-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin: var(--cym-gap) 0;
}

/* ---------- Data table ---------- */

.cym-ads-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface);
	font-size: var(--cym-fs-table);
}
.cym-ads-table th,
.cym-ads-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--cym-border);
	text-align: left;
	vertical-align: top;
}
.cym-ads-table thead th {
	font-size: var(--cym-fs-micro);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--cym-ink-muted);
	background: var(--cym-surface-alt);
}
.cym-ads-table tbody tr:last-child td {
	border-bottom: 0;
}
.cym-ads-table tbody tr:hover td {
	background: var(--cym-surface-alt);
}
.cym-ads-table .cym-ads-num,
.cym-ads-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cym-ads-table small {
	font-size: var(--cym-fs-small);
}

/* ---------- Status badges ---------- */

.cym-ads-status,
[class*="cym-ads-status-"] {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: var(--cym-fs-micro);
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	background: var(--cym-surface-alt);
	color: var(--cym-ink-muted);
	white-space: nowrap;
}
.cym-ads-status-active,
.cym-ads-status-approved,
.cym-ads-status-paid,
.cym-ads-status-cleared {
	background: var(--cym-success-bg);
	color: var(--cym-success);
}
.cym-ads-status-pending,
.cym-ads-status-review,
.cym-ads-status-requested {
	background: var(--cym-warn-bg);
	color: var(--cym-warn);
}
.cym-ads-status-blocked,
.cym-ads-status-rejected,
.cym-ads-status-expired {
	background: var(--cym-danger-bg);
	color: var(--cym-danger);
}
.cym-ads-status-paused,
.cym-ads-status-archived,
.cym-ads-status-held {
	background: var(--cym-surface-alt);
	color: var(--cym-ink-muted);
}

/* ---------- Buttons ---------- */

/* Unclassed submit buttons inside the app scope (Profile's four forms, registration
   forms) and core wp_login_form's #wp-submit get the primary look without markup
   churn; explicit classes still win. */
.cym-ads-app button[type="submit"]:not([class]),
.cym-ads-app #wp-submit,
.cym-ads-register-submit,
.cym-ads-cta {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--cym-primary);
	border-radius: var(--cym-radius);
	background: var(--cym-primary);
	color: var(--cym-primary-ink);
	font-size: var(--cym-fs-body);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cym-ads-cta:hover,
.cym-ads-cta:focus {
	background: var(--cym-primary-dark);
	border-color: var(--cym-primary-dark);
	color: var(--cym-primary-ink);
}
.cym-ads-cta-secondary {
	background: var(--cym-surface);
	color: var(--cym-primary);
}
.cym-ads-cta-secondary:hover,
.cym-ads-cta-secondary:focus {
	background: var(--cym-surface-alt);
	color: var(--cym-primary-dark);
}
.cym-ads-cta-danger {
	background: var(--cym-danger);
	border-color: var(--cym-danger);
	color: var(--cym-primary-ink);
}
.cym-ads-cta-danger:hover,
.cym-ads-cta-danger:focus {
	background: #8f2425;
	border-color: #8f2425;
	color: var(--cym-primary-ink);
}
/* Link-shaped danger button (e.g. table-row Delete) */
.cym-ads-link-danger {
	background: none;
	border: none;
	padding: 0;
	color: var(--cym-danger);
	cursor: pointer;
	text-decoration: underline;
	font-size: var(--cym-fs-small);
}
.cym-ads-link-danger:hover,
.cym-ads-link-danger:focus {
	color: #8f2425;
}

/* ---------- Forms ---------- */

.cym-ads-app input[type="text"],
.cym-ads-app input[type="email"],
.cym-ads-app input[type="url"],
.cym-ads-app input[type="number"],
.cym-ads-app input[type="password"],
.cym-ads-app select,
.cym-ads-app textarea {
	width: 100%;
	max-width: 480px;
	padding: 7px 10px;
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface);
	color: var(--cym-ink);
	font-size: var(--cym-fs-body);
	line-height: 1.4;
}
.cym-ads-app input:focus,
.cym-ads-app select:focus,
.cym-ads-app textarea:focus {
	border-color: var(--cym-primary);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--cym-primary);
}
.cym-ads-app label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: var(--cym-fs-table);
	color: var(--cym-ink);
}
.cym-ads-field {
	margin: 0 0 var(--cym-gap);
}
.cym-ads-app .description {
	display: block;
	margin-top: 4px;
	font-size: var(--cym-fs-small);
	color: var(--cym-ink-muted);
	font-weight: 400;
}
/* Two-column form rows (Profile) */
.cym-ads-profile-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--cym-gap);
}

/* ---------- Selectable option cards (audience / channel pickers) ---------- */

.cym-ads-option-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	margin: 8px 0;
}
.cym-ads-option-card {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 10px 12px;
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface);
	cursor: pointer;
	font-weight: 400;
	margin: 0;
}
.cym-ads-option-card:hover {
	border-color: var(--cym-primary);
}
.cym-ads-option-card input[type="checkbox"],
.cym-ads-option-card input[type="radio"] {
	width: auto;
	margin-top: 3px;
	flex-shrink: 0;
}
.cym-ads-option-card strong {
	display: block;
	font-size: var(--cym-fs-table);
}
.cym-ads-option-card small {
	display: block;
	font-size: var(--cym-fs-small);
	color: var(--cym-ink-muted);
}

/* ---------- Empty state ---------- */

.cym-ads-dashboard-empty {
	padding: calc(var(--cym-gap) * 3) var(--cym-gap);
	border: 1px dashed var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface-alt);
	text-align: center;
}
.cym-ads-dashboard-empty h3 {
	margin-top: 0;
}

/* ---------- Code / snippet blocks ---------- */

.cym-ads-code,
.cym-ads-app pre {
	padding: 12px;
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface-alt);
	font-size: var(--cym-fs-small);
	overflow: auto;
	max-width: 100%;
}
.cym-ads-app textarea.cym-ads-code {
	font-family: Consolas, Monaco, monospace;
	background: var(--cym-surface-alt);
}

/* ---------- Campaign wizard helpers ---------- */

/* Bordered section panel (targeting, channels, outcome bidding, …) */
.cym-ads-panel {
	margin: 18px 0;
	padding: 14px;
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface);
}
.cym-ads-panel > h3 {
	margin-top: 0;
}
.cym-ads-panel > .description {
	margin-top: 0;
	margin-bottom: 0;
}

/* Muted-background panel variant (Goals snippet box) */
.cym-ads-panel--alt {
	background: var(--cym-surface-alt);
}
.cym-ads-panel--alt pre {
	background: var(--cym-surface);
}
.cym-ads-panel h4 {
	margin-bottom: 4px;
}
.cym-ads-panel h4 + .description {
	margin-top: 0;
}

/* Flex header row: title left, action right (Goals list header) */
.cym-ads-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cym-gap);
}

.cym-ads-vertical-note {
	font-weight: 400;
	font-size: var(--cym-fs-small);
	color: var(--cym-ink-muted);
}

.cym-ads-img-preview {
	max-width: 100%;
	margin-top: 8px;
	border-radius: var(--cym-radius);
}

/* Phase 4.7.1 — the expected creative size, above the file input rather than in an
   error after the upload. Phase 4.7.3 — the verdict on the file just chosen. */
.cym-ads-creative-note {
	display: block;
	margin-bottom: 6px;
}
.cym-ads-creative-verdict {
	margin-top: 8px;
	padding: 8px 10px;
	border-left: 3px solid var(--cym-border);
	border-radius: var(--cym-radius);
	font-size: var(--cym-fs-small);
	line-height: 1.45;
}
.cym-ads-creative-verdict.is-pass {
	border-left-color: var(--cym-success);
	background: var(--cym-success-bg);
	color: var(--cym-success);
}
.cym-ads-creative-verdict.is-warn {
	border-left-color: var(--cym-warn);
	background: var(--cym-warn-bg);
	color: var(--cym-warn);
}
.cym-ads-creative-verdict.is-fail {
	border-left-color: var(--cym-danger);
	background: var(--cym-danger-bg);
	color: var(--cym-danger);
}

.cym-ads-estimate {
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px dashed var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-info-bg);
}
.cym-ads-checkout-summary {
	border-collapse: collapse;
	margin: 12px 0;
	min-width: 280px;
}
.cym-ads-checkout-summary td {
	padding: 3px 16px 3px 0;
}
.cym-ads-checkout-summary td:last-child {
	text-align: right;
}
.cym-ads-checkout-summary tr.cym-ads-checkout-summary__total td {
	border-top: 1px solid var(--cym-border);
	padding-top: 6px;
	font-weight: 600;
}

/* ---------- Utilities (4.8.3) ---------- */

.cym-ads-mono {
	font-family: Consolas, Monaco, monospace;
	font-size: var(--cym-fs-micro);
}
/* Uppercase micro-label above a value/field (embed code, stat labels) */
.cym-ads-microlabel {
	display: block;
	margin: 10px 0 4px;
	font-size: var(--cym-fs-micro);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--cym-ink-muted);
}
/* Two-column form grid (publisher/amplifier create forms) */
.cym-ads-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cym-gap);
	max-width: 640px;
}
.cym-ads-span2 {
	grid-column: 1 / -1;
}
.cym-ads-app textarea.cym-ads-code {
	width: 100%;
	max-width: 100%;
	font-size: var(--cym-fs-small);
}
/* Constrained single-column page (registration forms) */
.cym-ads-narrow {
	max-width: 560px;
	margin: 0 auto;
}
/* Small framed thumbnail link (amplifier share-kit image variants) */
.cym-ads-thumb-link {
	display: inline-block;
	padding: 4px 8px;
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface);
	font-size: var(--cym-fs-micro);
	text-decoration: none;
	text-align: center;
}
/* Bulk-action bar above a table + its checkbox column */
.cym-ads-bulk-bar {
	margin: 0 0 var(--cym-gap);
	padding: 8px 10px;
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface-alt);
}
.cym-ads-bulk-bar select {
	width: auto;
	min-width: 160px;
}
.cym-ads-check-col {
	width: 1%;
	white-space: nowrap;
}
.cym-ads-app .cym-ads-check-col input[type="checkbox"] {
	width: auto;
	margin: 0;
}
/* Accessible-but-hidden labels (WP core provides this class in admin, not on the front end) */
.cym-ads-app .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Ready-made goal template card: not a checkbox row, so it stacks its own content */
.cym-ads-template-card {
	cursor: default;
	align-items: stretch;
}
.cym-ads-template-card > span {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}
.cym-ads-template-card form {
	margin-top: auto;
}
.cym-ads-template-card:hover {
	border-color: var(--cym-border);
}

/* Collapsible details block (copy variants) */
.cym-ads-details {
	margin-top: 8px;
}
.cym-ads-details summary {
	cursor: pointer;
	font-size: var(--cym-fs-table);
}
.cym-ads-details__body {
	margin-top: 4px;
	padding: 8px 10px;
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface);
	font-size: var(--cym-fs-small);
}
.cym-ads-details__body p {
	margin: 0 0 6px;
}

/* ---------- Single funnel CTA (4.10c) ----------
   Replaces the legacy anonymous ordering form in place on the landing page. It sits
   inside theme content, not a dashboard, so it carries its own card rather than
   relying on the dashboard layout wrappers. */
.cym-ads-funnel__panel {
	padding: calc(var(--cym-gap) * 2);
	border: 1px solid var(--cym-border);
	border-radius: var(--cym-radius);
	background: var(--cym-surface-alt);
}
.cym-ads-funnel__title {
	margin: 0 0 calc(var(--cym-gap) / 2);
	font-size: var(--cym-fs-stat);
	line-height: 1.25;
}
.cym-ads-funnel__body {
	margin: 0 0 calc(var(--cym-gap) * 1.5);
	max-width: 56ch;
	color: var(--cym-ink-muted);
}
.cym-ads-funnel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cym-gap);
	margin: 0;
}
.cym-ads-funnel__link {
	color: var(--cym-ink-muted);
	text-decoration: underline;
}
.cym-ads-funnel__link:hover,
.cym-ads-funnel__link:focus {
	color: var(--cym-ink);
}

/* ---------- Billing (4.10c) ---------- */
.cym-ads-billing-table code {
	font-size: var(--cym-fs-small);
	white-space: nowrap;
}
.cym-ads-billing-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cym-gap);
	white-space: nowrap;
}

/* ---------- Charts (4.12) — inline SVG, no library ---------- */
.cym-ads-chart {
	margin: 0 0 var(--cym-gap);
}
.cym-ads-chart__svg {
	display: block;
	width: 100%;
	height: 120px;
	overflow: visible;
}
.cym-ads-chart__area {
	fill: var(--cym-primary);
	opacity: .12;
}
.cym-ads-chart__line {
	fill: none;
	stroke: var(--cym-primary);
	stroke-width: 1;
	stroke-linejoin: round;
	stroke-linecap: round;
	/* The viewBox is stretched non-uniformly, so an untreated stroke would be squashed. */
	vector-effect: non-scaling-stroke;
}
.cym-ads-chart__caption {
	display: flex;
	justify-content: space-between;
	gap: var(--cym-gap);
	margin-top: 6px;
	font-size: var(--cym-fs-micro);
	color: var(--cym-ink-muted);
}
.cym-ads-chart__data {
	margin: 0 0 calc(var(--cym-gap) * 1.5);
}
.cym-ads-chart__data > summary {
	cursor: pointer;
	font-size: var(--cym-fs-small);
	color: var(--cym-ink-muted);
}
.cym-ads-chart__data[open] > summary {
	margin-bottom: var(--cym-gap);
}

/* Horizontal comparison bars (surfaces, channels). */
.cym-ads-bars {
	display: grid;
	gap: 10px;
}
.cym-ads-bars__row {
	display: grid;
	grid-template-columns: minmax(90px, 22%) 1fr auto;
	align-items: center;
	gap: 10px;
	font-size: var(--cym-fs-table);
}
.cym-ads-bars__label {
	color: var(--cym-ink);
	overflow-wrap: anywhere;
}
.cym-ads-bars__track {
	height: 10px;
	border-radius: 5px;
	background: var(--cym-surface-alt);
	overflow: hidden;
}
.cym-ads-bars__fill {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: var(--cym-primary);
}
.cym-ads-bars__value {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cym-ads-bars__sub {
	grid-column: 2 / -1;
	font-size: var(--cym-fs-micro);
	color: var(--cym-ink-muted);
}

/* ---------- Layout + responsive pass (4.8.4) ---------- */

/* Campaign wizard: genuine two-column layout on wide screens (the markup always
   had the grid classes; no stylesheet ever defined them, so it silently stacked). */
.cym-ads-campaign-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(var(--cym-gap) * 2);
	align-items: start;
}

@media (max-width: 781px) {
	.cym-ads-campaign-grid {
		grid-template-columns: 1fr;
	}
}

/* Below the two-column threshold the sidebar becomes a normal block above the
   content, and its links go back to a wrapping row so they don't eat the screen. */
@media (max-width: 781px) {
	.cym-ads-app:has(> .cym-ads-dash-nav) {
		display: block;
	}
	.cym-ads-app > .cym-ads-dash-nav {
		position: static;
	}
	.cym-ads-dash-nav__items {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
	}
	.cym-ads-dash-nav__link--logout {
		margin-top: 0;
		padding-top: 9px;
		border-top: 0;
		border-radius: var(--cym-radius);
	}
}

@media (max-width: 600px) {
	/* Stat cards: fixed two-up beats auto-fit jitter at phone widths. */
	.cym-ads-summary-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.cym-ads-summary-value {
		font-size: 20px;
	}
	.cym-ads-dash-nav__link {
		padding: 8px 12px;
	}
	/* Every data table becomes its own horizontal scroll container so the PAGE
	   never scrolls sideways. Headers + numeric cells stay on one line; text
	   cells may wrap (keeps campaign-title cells from forcing extreme widths). */
	.cym-ads-table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.cym-ads-table thead th,
	.cym-ads-table .cym-ads-num {
		white-space: nowrap;
	}
	/* Two-column form + option grids collapse to one. */
	.cym-ads-form-grid,
	.cym-ads-option-grid {
		grid-template-columns: 1fr;
	}
	/* Inputs span the full width (desktop caps them at 480px). */
	.cym-ads-app input[type="text"],
	.cym-ads-app input[type="email"],
	.cym-ads-app input[type="url"],
	.cym-ads-app input[type="number"],
	.cym-ads-app input[type="password"],
	.cym-ads-app select,
	.cym-ads-app textarea {
		max-width: 100%;
	}
	.cym-ads-checkout-summary {
		width: 100%;
		min-width: 0;
	}
}

/* Run-of-surface — what a bundle contains, shown while the advertiser is choosing. */
.cym-ads-bundle-note {
	margin-top: 8px;
	padding: 8px 10px;
	border-left: 3px solid var(--cym-info);
	border-radius: var(--cym-radius);
	background: var(--cym-info-bg);
	font-size: var(--cym-fs-small);
	line-height: 1.45;
}