/* ads-tests.css — Ad Testing UI (Phase 4 v1), src/public/js/ads-tests.js.
 *
 * Every value here is var(--rk-*) — no hardcoded colours/sizes (CODING-STANDARDS
 * §"UI Kit" + §"Design System & UX Principles", MANDATORY). Component classes that
 * ui-kit.css already provides (rk-btn, rk-card, rk-badge, rk-input, rk-tabs,
 * rk-breadcrumbs) are reused directly in the markup — this file only adds the
 * layout/structure ui-kit.css doesn't have: the health strip, spend-vs-cap bar,
 * card grids, variant preview cards, the results table, the connections list and
 * the confirm dialog. Mirrors the scoped-namespace pattern of css/videographer.css
 * (.vg-*) — this file uses .ads-*.
 */

.ads-page {
  max-width: var(--rk-content-wide);
  margin: 0 auto;
  padding: var(--rk-space-2) 0 var(--rk-space-20);
}

/* ── Page head ── */
.ads-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rk-space-4);
  margin-bottom: var(--rk-space-6);
  flex-wrap: wrap;
}
.ads-head h1 { margin: var(--rk-space-2) 0 var(--rk-space-1); }
.ads-head .ads-sub { color: var(--rk-slate); font-size: var(--rk-text-sm); max-width: 640px; }

/* ── Health strip ── */
.ads-health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--rk-space-3);
  margin-bottom: var(--rk-space-8);
}
.ads-health-item {
  background: var(--rk-cloud);
  border-radius: var(--rk-radius-lg);
  padding: var(--rk-space-3) var(--rk-space-4);
}
.ads-health-label {
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-weight-medium);
  color: var(--rk-slate-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--rk-space-1);
}
.ads-health-value {
  font-size: var(--rk-text-sm);
  font-weight: var(--rk-weight-medium);
}
.ads-health-ok   { color: var(--rk-success); }
.ads-health-bad  { color: var(--rk-slate); }
.ads-health-dash { color: var(--rk-slate-light); }

/* ── Section (row) ── */
.ads-section { margin-top: var(--rk-space-8); }
.ads-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rk-space-3);
  margin-bottom: var(--rk-space-3);
}
.ads-section-head h2 { margin: 0; }
.ads-section-sub { color: var(--rk-slate); font-size: var(--rk-text-sm); }

/* ── Card grid (Needs approval / Running) ── */
.ads-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--rk-space-4);
}
.ads-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rk-space-2);
  margin-bottom: var(--rk-space-2);
}
.ads-card-hypothesis {
  font-size: var(--rk-text-md);
  font-weight: var(--rk-weight-medium);
  color: var(--rk-navy);
  line-height: var(--rk-leading-normal);
  margin-bottom: var(--rk-space-2);
}
.ads-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rk-space-2);
  font-size: var(--rk-text-sm);
  color: var(--rk-slate);
  margin-bottom: var(--rk-space-3);
}
.ads-card-meta span::after { content: '·'; margin-left: var(--rk-space-2); color: var(--rk-gray-light); }
.ads-card-meta span:last-child::after { content: none; }
.ads-card-cap {
  font-size: var(--rk-text-sm);
  color: var(--rk-slate);
  margin-bottom: var(--rk-space-3);
}
.ads-card-actions { display: flex; gap: var(--rk-space-2); flex-wrap: wrap; }

/* Minimum 48px touch target — CODING-STANDARDS "no exceptions" (rk-btn only
   guarantees 44px, and only under pointer:coarse). Applied to the primary
   review/approve/dismiss actions. */
.ads-btn-touch { min-height: var(--rk-touch-target); }

/* ── Spend-vs-cap progress bar ── */
.ads-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--rk-text-sm);
  color: var(--rk-slate);
  margin-bottom: var(--rk-space-1);
}
.ads-progress-row strong { color: var(--rk-navy); font-weight: var(--rk-weight-medium); }
.ads-progress {
  width: 100%;
  height: var(--rk-space-2);
  background: var(--rk-cloud);
  border-radius: var(--rk-radius-pill);
  overflow: hidden;
  margin-bottom: var(--rk-space-2);
}
.ads-progress-fill {
  height: 100%;
  background: var(--rk-blue);
  border-radius: var(--rk-radius-pill);
  transition: width var(--rk-transition);
}
.ads-progress-fill.ads-progress-full { background: var(--rk-warning); }

/* ── Concluded — collapsed list ── */
.ads-concluded-list { display: flex; flex-direction: column; gap: var(--rk-space-1); }
.ads-concluded-row {
  display: flex;
  align-items: center;
  gap: var(--rk-space-3);
  padding: var(--rk-space-3) var(--rk-space-4);
  border-radius: var(--rk-radius-lg);
  border: var(--rk-border);
  cursor: pointer;
  background: var(--rk-white);
  transition: background var(--rk-transition);
}
.ads-concluded-row:hover { background: var(--rk-cloud); }
.ads-concluded-hyp {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--rk-text-sm);
  color: var(--rk-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-concluded-learning {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--rk-text-sm);
  color: var(--rk-slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Empty state ── */
.ads-empty {
  text-align: center;
  padding: var(--rk-space-12) var(--rk-space-6);
  border: var(--rk-border);
  border-radius: var(--rk-radius-xl);
  background: var(--rk-cloud);
}
.ads-empty-icon { font-size: 32px; margin-bottom: var(--rk-space-3); }
.ads-empty h3 { margin: 0 0 var(--rk-space-2); }
.ads-empty p { color: var(--rk-slate); max-width: 440px; margin: 0 auto; }
.ads-empty-inline { color: var(--rk-slate); font-size: var(--rk-text-sm); padding: var(--rk-space-3) 0; }

/* ── Detail — audience spec key/value list ── */
.ads-kv { margin: 0; }
.ads-kv-row {
  display: flex;
  gap: var(--rk-space-4);
  padding: var(--rk-space-2) 0;
  border-bottom: 1px solid var(--rk-gray-light);
  font-size: var(--rk-text-sm);
}
.ads-kv-row:last-child { border-bottom: none; }
.ads-kv-row dt { flex: 0 0 160px; color: var(--rk-slate); font-weight: var(--rk-weight-medium); }
.ads-kv-row dd { margin: 0; flex: 1 1 auto; color: var(--rk-navy); word-break: break-word; }

/* ── Variant preview cards ── */
.ads-variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--rk-space-4);
}
.ads-variant-card {
  border: var(--rk-border);
  border-radius: var(--rk-radius-lg);
  overflow: hidden;
  background: var(--rk-white);
}
.ads-variant-img { width: 100%; aspect-ratio: 16 / 9; background: var(--rk-silicon); overflow: hidden; }
.ads-variant-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ads-variant-body { padding: var(--rk-space-3) var(--rk-space-4); }
.ads-variant-label {
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-weight-medium);
  color: var(--rk-slate-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--rk-space-1);
}
.ads-variant-headline { font-size: var(--rk-text-md); font-weight: var(--rk-weight-medium); color: var(--rk-navy); margin-bottom: var(--rk-space-1); }
.ads-variant-desc { font-size: var(--rk-text-sm); color: var(--rk-slate); line-height: var(--rk-leading-normal); }

/* ── Results table ── */
.ads-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ads-table { width: 100%; border-collapse: collapse; font-size: var(--rk-text-sm); }
.ads-table th, .ads-table td {
  text-align: left;
  padding: var(--rk-space-2) var(--rk-space-3);
  border-bottom: 1px solid var(--rk-gray-light);
  white-space: nowrap;
}
.ads-table th { color: var(--rk-slate); font-weight: var(--rk-weight-medium); font-size: var(--rk-text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.ads-table td { color: var(--rk-navy); }

/* ── Settings — connections list ── */
.ads-conn-list { display: flex; flex-direction: column; gap: var(--rk-space-2); }
.ads-conn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rk-space-3);
  padding: var(--rk-space-3) 0;
  border-bottom: 1px solid var(--rk-gray-light);
  flex-wrap: wrap;
}
.ads-conn-row:last-child { border-bottom: none; }
.ads-conn-main { display: flex; align-items: center; gap: var(--rk-space-3); flex-wrap: wrap; }
.ads-conn-name { font-size: var(--rk-text-md); font-weight: var(--rk-weight-medium); color: var(--rk-navy); }

/* ── Settings — Google account picker ("Connect = Provision" step 2:
   the tenant does exactly one more click, picking WHICH account —
   phase-3-4-mcp-and-dashboard.md §"Connect = Provision"). ── */
.ads-acct-list { display: flex; flex-direction: column; gap: var(--rk-space-1); }
.ads-acct-row {
  display: flex;
  align-items: center;
  gap: var(--rk-space-3);
  padding: var(--rk-space-3);
  border-radius: var(--rk-radius-lg);
  border: var(--rk-border);
  cursor: pointer;
  font-size: var(--rk-text-sm);
  color: var(--rk-navy);
}
.ads-acct-row:hover { background: var(--rk-cloud); }
.ads-acct-row input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; }
.ads-acct-id { color: var(--rk-slate); }

/* ── Settings — post-provision confirmation banner ("Connect = Provision"
   result: tag + conversions set up with zero further tenant action). ── */
.ads-provisioned-card { border-color: var(--rk-success); }
.ads-provisioned-head { font-size: var(--rk-text-md); font-weight: var(--rk-weight-medium); color: var(--rk-navy); margin-bottom: var(--rk-space-2); }

/* ── Confirm dialog (scoped — the shared showDeleteConfirm's fixed "Delete"
   button label doesn't fit Approve/Dismiss; design-system rule 6 "Always
   Recoverable" still requires an explicit confirmation step here). ── */
.ads-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 46, 0.45);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rk-space-4);
  overflow-y: auto; /* Tall content scrolls instead of falling off-screen. */
}
.ads-confirm-modal {
  background: var(--rk-white);
  border-radius: var(--rk-radius-xl);
  padding: var(--rk-space-6);
  width: 420px;
  max-width: 100%;
  box-shadow: var(--rk-shadow-lg);
  margin-top: auto;
  margin-bottom: auto;
}
.ads-confirm-modal h3 { margin: 0 0 var(--rk-space-2); }
.ads-confirm-modal p { margin: 0 0 var(--rk-space-5); color: var(--rk-slate); }
.ads-confirm-actions { display: flex; gap: var(--rk-space-2); justify-content: flex-end; flex-wrap: wrap; }

/* ── First-timer connect guide (Settings, unconnected state) ──
   A compact card (not a full-screen takeover) so the Connect button below it
   stays visible and actionable. Colour is always paired with an icon + text
   (design-system rule). ── */
.ads-guide { border-color: var(--rk-blue); background: var(--rk-blue-subtle); }
.ads-guide-eyebrow {
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-weight-medium);
  color: var(--rk-info);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--rk-space-2);
}
.ads-guide-lede {
  color: var(--rk-slate);
  font-size: var(--rk-text-sm);
  line-height: var(--rk-leading-normal);
  margin: var(--rk-space-2) 0 0;
  max-width: 640px;
}
.ads-guide-steps {
  list-style: none;
  margin: var(--rk-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rk-space-3);
}
.ads-guide-step { display: flex; gap: var(--rk-space-3); align-items: flex-start; }
.ads-guide-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--rk-radius-pill);
  background: var(--rk-blue);
  color: var(--rk-white);
  font-size: var(--rk-text-sm);
  font-weight: var(--rk-weight-medium);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ads-guide-step-body { flex: 1 1 auto; min-width: 0; }
.ads-guide-step-t { font-size: var(--rk-text-md); font-weight: var(--rk-weight-medium); color: var(--rk-navy); }
.ads-guide-step-d { font-size: var(--rk-text-sm); color: var(--rk-slate); line-height: var(--rk-leading-normal); margin-top: var(--rk-space-1); }
.ads-guide-next {
  margin-top: var(--rk-space-4);
  padding: var(--rk-space-3) var(--rk-space-4);
  background: var(--rk-white);
  border-radius: var(--rk-radius-lg);
}
.ads-guide-next-t { font-size: var(--rk-text-sm); font-weight: var(--rk-weight-medium); color: var(--rk-navy); }
.ads-guide-next-list { margin: var(--rk-space-2) 0 0; padding-left: var(--rk-space-5); color: var(--rk-slate); font-size: var(--rk-text-sm); line-height: var(--rk-leading-normal); }
.ads-guide-next-list li { margin-bottom: var(--rk-space-1); }
.ads-guide-guard {
  display: flex;
  gap: var(--rk-space-2);
  align-items: flex-start;
  margin-top: var(--rk-space-4);
  padding: var(--rk-space-3) var(--rk-space-4);
  background: var(--rk-success-bg);
  border-radius: var(--rk-radius-lg);
  font-size: var(--rk-text-sm);
  color: var(--rk-navy);
  line-height: var(--rk-leading-normal);
}
.ads-guide-guard-ic { flex: 0 0 auto; }
.ads-guide-help { margin-top: var(--rk-space-3); font-size: var(--rk-text-sm); color: var(--rk-slate); }
.ads-guide-help a { color: var(--rk-blue); }

/* Short "one more step" nudge (connected, no account picked). */
.ads-guide-nudge { border-color: var(--rk-success); background: var(--rk-success-bg); }
.ads-guide-nudge-row { display: flex; gap: var(--rk-space-3); align-items: flex-start; }
.ads-guide-nudge-ic { flex: 0 0 auto; font-size: var(--rk-text-lg); }

/* ── Collapsible "how it works" reference (shown once connected) ──
   Native <details>/<summary>, collapsed by default. The summary is a clearly
   tappable row (48px min touch target) with an icon + text + chevron affordance.
   The nudge above it (when present) keeps its own bottom margin, so the
   reference sits under it as a distinct card. ── */
.ads-guide-details { padding: 0; margin-top: var(--rk-space-4); }
.ads-guide-nudge + .ads-guide-details { margin-top: var(--rk-space-3); }
.ads-guide-summary {
  display: flex;
  align-items: center;
  gap: var(--rk-space-3);
  min-height: 48px;
  padding: var(--rk-space-3) var(--rk-space-4);
  cursor: pointer;
  list-style: none;               /* hide default disclosure marker */
  border-radius: var(--rk-radius-lg);
}
.ads-guide-summary::-webkit-details-marker { display: none; }
.ads-guide-summary:hover { background: var(--rk-white); }
.ads-guide-summary:focus-visible { outline: none; box-shadow: var(--rk-focus-ring); }
.ads-guide-summary-ic { flex: 0 0 auto; font-size: var(--rk-text-lg); }
.ads-guide-summary-txt { flex: 1 1 auto; min-width: 0; }
.ads-guide-summary-t {
  display: block;
  font-size: var(--rk-text-md);
  font-weight: var(--rk-weight-medium);
  color: var(--rk-navy);
}
.ads-guide-summary-sub {
  display: block;
  font-size: var(--rk-text-sm);
  color: var(--rk-slate);
  line-height: var(--rk-leading-normal);
  margin-top: 2px;
}
.ads-guide-summary-chev {
  flex: 0 0 auto;
  color: var(--rk-info);
  transition: transform 0.15s ease;
}
.ads-guide-details[open] .ads-guide-summary-chev { transform: rotate(180deg); }
.ads-guide-details-body {
  padding: 0 var(--rk-space-4) var(--rk-space-4);
}
.ads-guide-details-body .ads-guide-lede { margin-top: 0; }

/* Descriptive "how it works" points (icon bullets, not numbered steps). */
.ads-ref-list {
  list-style: none;
  margin: var(--rk-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rk-space-3);
}
.ads-ref-item { display: flex; gap: var(--rk-space-3); align-items: flex-start; }
.ads-ref-ic { flex: 0 0 auto; font-size: var(--rk-text-lg); line-height: 1.2; }
.ads-ref-body { flex: 1 1 auto; min-width: 0; }
.ads-ref-t { font-size: var(--rk-text-md); font-weight: var(--rk-weight-medium); color: var(--rk-navy); }
.ads-ref-d { font-size: var(--rk-text-sm); color: var(--rk-slate); line-height: var(--rk-leading-normal); margin-top: var(--rk-space-1); }

/* ── Board (unconnected) — single CTA to Settings ── */
.ads-board-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rk-space-4);
  flex-wrap: wrap;
  border-color: var(--rk-blue);
  background: var(--rk-blue-subtle);
  margin-bottom: var(--rk-space-6);
}
.ads-board-cta-main { flex: 1 1 260px; min-width: 0; }
.ads-board-cta-t { font-size: var(--rk-text-md); font-weight: var(--rk-weight-medium); color: var(--rk-navy); }
.ads-board-cta-d { font-size: var(--rk-text-sm); color: var(--rk-slate); line-height: var(--rk-leading-normal); margin-top: var(--rk-space-1); max-width: 560px; }

/* ── Mobile-first (375px) ── */
@media (max-width: 640px) {
  .ads-cards, .ads-variant-grid, .ads-health { grid-template-columns: 1fr; }
  .ads-kv-row { flex-direction: column; gap: var(--rk-space-1); }
  .ads-kv-row dt { flex: none; }
  .ads-card-actions { flex-direction: column; }
  .ads-card-actions .rk-btn { width: 100%; }
  .ads-confirm-actions { flex-direction: column-reverse; }
  .ads-confirm-actions .rk-btn { width: 100%; }
  .ads-board-cta { flex-direction: column; align-items: stretch; }
  .ads-board-cta .rk-btn { width: 100%; }
}

/* ══ The Facebook screen — a read mirror of Ads Manager ═══════════════════
   Campaigns → ad sets → ads, one level at a time. Tokens only (no hex, no
   magic numbers) per the design system; touch targets 48px+ because a coach
   opens this on a phone between sessions. */

.fb-note { color: var(--rk-slate); font-size: var(--rk-text-sm); margin: 0 0 var(--rk-space-3); }

.fb-list { display: flex; flex-direction: column; }

/* Rows are BUTTONS at the two drillable levels, so keyboard and screen-reader
   users get the same navigation a tap gives. Reset the button chrome rather
   than building a div that merely looks tappable. */
.fb-row {
  display: flex; align-items: center; gap: var(--rk-space-3);
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--rk-gray-light);
  padding: var(--rk-space-3) 0;
  min-height: 48px;                     /* mobile touch target — non-negotiable */
  cursor: pointer; font: inherit; color: inherit;
  flex-wrap: wrap;
}
.fb-row:last-child { border-bottom: none; }
.fb-row:hover { background: var(--rk-cloud); }
.fb-row:focus-visible { outline: 2px solid var(--rk-blue); outline-offset: -2px; }
.fb-row-leaf { cursor: default; }
.fb-row-leaf:hover { background: none; }

.fb-row-main { display: flex; align-items: center; gap: var(--rk-space-2); flex: 1 1 240px; min-width: 0; flex-wrap: wrap; }
.fb-row-name {
  font-size: var(--rk-text-md); color: var(--rk-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.fb-row-meta {
  display: flex; gap: var(--rk-space-3); flex-wrap: wrap;
  color: var(--rk-slate); font-size: var(--rk-text-sm);
  flex: 1 1 100%;
}
.fb-row-go { color: var(--rk-slate-light); font-size: var(--rk-text-xl); line-height: 1; }

/* Status. ⚠️ Colour is NEVER the only carrier — every pill ships an icon and a
   word, so it reads the same to a colour-blind coach and in a screenshot. */
.fb-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--rk-text-xs); font-weight: var(--rk-weight-medium);
  padding: 2px var(--rk-space-2); border-radius: var(--rk-radius-lg);
  white-space: nowrap;
}
.fb-pill.fb-on   { background: var(--rk-success-bg); color: var(--rk-success); }
.fb-pill.fb-off  { background: var(--rk-silicon);    color: var(--rk-slate); }
.fb-pill.fb-bad  { background: var(--rk-error-bg);   color: var(--rk-error); }
.fb-pill.fb-wait { background: var(--rk-warning-bg); color: var(--rk-warning); }

.fb-warn { color: var(--rk-warning); font-size: var(--rk-text-sm); flex: 1 1 100%; }

.fb-back {
  background: none; border: none; padding: var(--rk-space-2) 0;
  color: var(--rk-blue); font: inherit; font-size: var(--rk-text-sm);
  cursor: pointer; min-height: 44px;
}
.fb-back:hover { text-decoration: underline; }

/* The account line, and the two states that stop ads dead however correct the
   campaigns are: a disabled account, or no payment method. */
.fb-banner { margin-bottom: var(--rk-space-4); }
.fb-acct { display: flex; gap: var(--rk-space-3); flex-wrap: wrap; align-items: baseline; }
.fb-acct-name { color: var(--rk-navy); font-size: var(--rk-text-md); }
.fb-acct-meta { color: var(--rk-slate); font-size: var(--rk-text-sm); }
.fb-banner-bad { border-color: var(--rk-error); }
.fb-problems { margin-top: var(--rk-space-2); color: var(--rk-error); font-size: var(--rk-text-sm); display: flex; flex-direction: column; gap: 4px; }

/* ⚠️ Below 769px the meta column takes a full line of its own, and because
   flex wraps in document order that left the chevron stranded on a line
   between the metrics and a warning, reading as a stray character rather than
   as "tap to go in". `order` moves it up beside the name WITHOUT reordering
   the DOM, so the reading order a screen reader gets is unchanged: name and
   status, then the numbers, then the warning. */
@media (max-width: 768px) {
  .fb-row-go   { order: 1; margin-left: auto; }
  .fb-row-meta { order: 2; }
  .fb-warn     { order: 3; }
}

@media (min-width: 769px) {
  /* Desktop gets the meta column inline rather than wrapped — same rows, more
     room, no second layout to maintain. */
  .fb-row-meta { flex: 0 1 auto; justify-content: flex-end; }
  .fb-row-main { flex: 1 1 auto; }
}

/* ── The date filter + refresh + last-updated (T6/T7). Ads-Manager-style date
   chips, a custom range behind a toggle, and when the numbers were last pulled
   with a button to pull them again. Tokens only, mobile-first. ── */
.fb-controls { margin-bottom: var(--rk-space-4); }
.fb-range-row { display: flex; gap: var(--rk-space-2); flex-wrap: wrap; }
.fb-range-chip {
  background: var(--rk-cloud); border: 1px solid var(--rk-gray-light);
  color: var(--rk-slate); font: inherit; font-size: var(--rk-text-sm);
  padding: var(--rk-space-2) var(--rk-space-3); border-radius: var(--rk-radius-pill);
  cursor: pointer;
}
.fb-range-chip.active { background: var(--rk-navy); color: var(--rk-white); border-color: var(--rk-navy); }
.fb-range-chip:focus-visible { outline: 2px solid var(--rk-blue); outline-offset: 2px; }
.fb-custom-row { display: flex; gap: var(--rk-space-2); align-items: center; flex-wrap: wrap; margin-top: var(--rk-space-3); }
.fb-custom-row input[type="date"] { flex: 1 1 130px; min-width: 0; }
.fb-custom-sep { color: var(--rk-slate-light); }
.fb-controls-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rk-space-3); margin-top: var(--rk-space-3); flex-wrap: wrap;
}
.fb-updated { color: var(--rk-slate-light); font-size: var(--rk-text-xs); }

/* ── A campaign / ad-set / ad row, its numbers, and its pause (T9/T10/T11).
   The drill target stays a real <button>; the metrics grid and the pause
   button are SIBLINGS of it inside the wrapper, never nested inside a button
   (invalid, and it swallows the tap). ── */
.fb-rowwrap { border-bottom: 1px solid var(--rk-gray-light); padding-bottom: var(--rk-space-2); }
.fb-rowwrap:last-child { border-bottom: none; }
.fb-rowwrap .fb-row { border-bottom: none; }
.fb-row-sub {
  display: flex; gap: var(--rk-space-3); flex-wrap: wrap;
  color: var(--rk-slate); font-size: var(--rk-text-sm); flex: 1 1 100%;
}
.fb-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--rk-space-2); margin: var(--rk-space-2) 0;
}
.fb-metric { background: var(--rk-cloud); border-radius: var(--rk-radius-lg); padding: var(--rk-space-2) var(--rk-space-3); }
.fb-metric-v { display: block; color: var(--rk-navy); font-size: var(--rk-text-md); font-variant-numeric: tabular-nums; }
.fb-metric-strong .fb-metric-v { font-weight: var(--rk-weight-medium); }
.fb-metric-l { display: block; color: var(--rk-slate-light); font-size: var(--rk-text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.fb-metrics-empty { color: var(--rk-slate-light); font-size: var(--rk-text-sm); padding: var(--rk-space-2) 0; }
.fb-row-actions { display: flex; gap: var(--rk-space-2); flex-wrap: wrap; }
.fb-pause { min-height: var(--rk-touch-target); }

/* ── The staleness banner + the tick-by-tick republish checklist (D5) ──────
   Alex, 2026-08-24: "as each one's being done, like a tick, tick, tick for
   each funnel, website, community, and so on, so they know."
   ⚠️ The mark is a SHAPE as well as a colour — a half-finished site and a
   failed one must be tellable apart without relying on hue. */
.ads-rp-card .ads-rp-groups { color: var(--rk-slate); font-size: var(--rk-text-sm); margin-top: 4px; }
.ads-rp-card .ads-rp-note-block {
  color: var(--rk-slate); font-size: var(--rk-text-sm);
  margin-top: var(--rk-space-2);
}
.ads-rp-card .ads-rp-error {
  color: var(--rk-error); font-size: var(--rk-text-sm);
  margin-top: var(--rk-space-2);
}
.ads-rp-list { display: flex; flex-direction: column; margin-top: var(--rk-space-3); }
.ads-rp-row {
  display: flex; align-items: baseline; gap: var(--rk-space-3);
  flex-wrap: wrap; padding: var(--rk-space-2) 0;
  border-bottom: 1px solid var(--rk-gray-light);
  min-height: 40px;
}
.ads-rp-row:last-child { border-bottom: none; }
.ads-rp-mark { width: 1.2em; flex: 0 0 auto; font-size: var(--rk-text-md); }
.ads-rp-name { color: var(--rk-navy); font-size: var(--rk-text-md); flex: 1 1 200px; min-width: 0; }
.ads-rp-type { color: var(--rk-slate-light); font-size: var(--rk-text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.ads-rp-note { color: var(--rk-slate); font-size: var(--rk-text-sm); flex: 1 1 100%; }
.ads-rp-tick { color: var(--rk-success); }
.ads-rp-part { color: var(--rk-warning); }
.ads-rp-fail { color: var(--rk-error); }
.ads-rp-run  { color: var(--rk-blue); }
.ads-rp-wait { color: var(--rk-slate-light); }

/* ── The tracking screen (D6) ──────────────────────────────────────────────
   Alex, 2026-08-24: "use the same naming conventions that Facebook ads have.
   It's a direct mirroring of their naming conventions so there's no kind of
   learning curve for this."

   ⚠️ Two tables of five columns each. Both scroll INSIDE their own container
   rather than making the page scroll sideways — the not-sent column is a
   sentence and it is the column somebody has come here to read, so it is never
   the one that gets clipped. Tokens only, no raw hex. */
.trk-tabs { display: flex; gap: var(--rk-space-2); margin-bottom: var(--rk-space-4); flex-wrap: wrap; }
.trk-tab {
  background: none; border: none; cursor: pointer;
  padding: var(--rk-space-2) var(--rk-space-3);
  /* ⚠️ 48px, from the token, not a raw 44. CODING-STANDARDS "Minimum touch
     target: 48px. No exceptions." — this was written as a bare 44px and then
     PINNED at 44 by its own test, which is worse than the miss: a test that
     enforces the wrong standard defends it. */
  min-height: var(--rk-touch-target);
  color: var(--rk-slate); font-size: var(--rk-text-md);
  border-bottom: 2px solid transparent;
}
.trk-tab.active { color: var(--rk-navy); border-bottom-color: var(--rk-blue); }
.trk-tab:focus-visible { outline: 2px solid var(--rk-blue); outline-offset: 2px; }
.trk-test {
  display: flex; align-items: center; gap: var(--rk-space-2);
  color: var(--rk-slate); font-size: var(--rk-text-sm);
  margin-bottom: var(--rk-space-3); min-height: var(--rk-touch-target);
}
.trk-scroll { overflow-x: auto; margin-top: var(--rk-space-3); }
.trk-table { width: 100%; border-collapse: collapse; font-size: var(--rk-text-sm); }
.trk-table th {
  text-align: left; color: var(--rk-slate-light);
  font-size: var(--rk-text-xs); text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 500; padding: 0 var(--rk-space-3) var(--rk-space-2) 0;
  border-bottom: 1px solid var(--rk-gray-light); white-space: nowrap;
}
.trk-table td {
  padding: var(--rk-space-2) var(--rk-space-3) var(--rk-space-2) 0;
  border-bottom: 1px solid var(--rk-gray-light);
  vertical-align: top; color: var(--rk-navy);
}
.trk-table tr:last-child td { border-bottom: none; }
.trk-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trk-label { display: block; color: var(--rk-navy); }
.trk-slug { display: block; color: var(--rk-slate-light); font-size: var(--rk-text-xs); }
.trk-fb { color: var(--rk-navy); font-weight: 500; }
.trk-muted { color: var(--rk-slate-light); }
.trk-why { color: var(--rk-slate); min-width: 220px; }
.trk-yes { color: var(--rk-success); }
.trk-no { color: var(--rk-error); }
.trk-old { color: var(--rk-warning); }

/* ⚠️ ON A PHONE A FIVE-COLUMN TABLE IS THE WRONG SHAPE, and the two columns
   that matter are the ones that fall off the edge. Measured at 390px on
   2026-08-24: "Sent to Facebook" and "Not sent, and why" — the whole reason
   the screen exists — were entirely off-screen behind a scroll with no
   affordance, so the phone view showed a table that looked complete and
   answered nothing.

   Each row becomes a block and each cell wears its own heading, taken from the
   `data-l` the markup already carries. One markup, two shapes. */
@media (max-width: 640px) {
  .trk-table thead { display: none; }
  .trk-table, .trk-table tbody, .trk-table tr, .trk-table td { display: block; width: 100%; }
  .trk-table tr {
    padding: var(--rk-space-3) 0;
    border-bottom: 1px solid var(--rk-gray-light);
  }
  .trk-table tr:last-child { border-bottom: none; }
  .trk-table td {
    border-bottom: none; padding: var(--rk-space-1) 0;
    display: flex; gap: var(--rk-space-3); align-items: baseline;
    flex-wrap: wrap;
  }
  /* The heading, the value, and the second line under it — not three things
     racing each other off the right edge. */
  .trk-table td > .trk-slug { flex: 1 1 60%; margin-left: 40%; }
  .trk-table td::before {
    content: attr(data-l);
    flex: 0 0 40%;
    color: var(--rk-slate-light);
    font-size: var(--rk-text-xs);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .trk-table td.trk-num { text-align: left; }
  .trk-why { min-width: 0; }
  /* The shared range row is one unwrapped flex line, so at 390px the Apply
     button was clipped past the right edge and unreachable. */
  #ads-tracking-host .ca-controls > div { flex-wrap: wrap; }
  #ads-tracking-host .ca-controls input[type="date"] { flex: 1 1 130px; min-width: 0; }
}