/* ActivateDigital inside WordPress admin (James, 13 October 2026, the Woo facelift).

   The same look as the Shopify app: a navy to cobalt strip with the mark, cobalt buttons,
   cards with a 4px cobalt top edge and a footer with the passport host and Help. Loaded on
   our page alone, after the light values of tokens.css, and scoped to .ad-wrap so the admin
   menu, the top bar and every other page stay WordPress's own. Every colour is a token and
   no font is named, so every word stays in the admin's own type. */

.ad-wrap { max-width: 980px; color: var(--ink); }
.ad-wrap h2 { color: var(--ink); }

.ad-strip {
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-5) var(--space-5);
  border-radius: var(--site-radius);
  background: linear-gradient(118deg, var(--site-navy-deep) 0%, var(--site-navy) 42%, var(--site-cobalt) 128%);
  box-shadow: var(--site-shadow);
  color: var(--masthead-ink);
}
.ad-strip .ad-mark { flex: none; display: block; border-radius: 50%; box-shadow: 0 0 0 3px var(--masthead-chip); }
.ad-strip__title {
  margin: 0; padding: 0; font-size: 22px; font-weight: 700; line-height: 1.25;
  letter-spacing: var(--tracking-tight); color: var(--masthead-ink);
}
.ad-strip__line { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--masthead-quiet); }

.ad-next {
  padding: var(--space-5) var(--space-6);
  background: var(--panel);
  border-top: 4px solid var(--site-cobalt);
  border-radius: 4px 4px 22px 22px;
  box-shadow: var(--shadow-3), 0 0 0 1px var(--line);
}
.ad-eyebrow {
  margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-4); color: var(--site-cobalt);
}
.ad-next h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.ad-next p { margin: 0 0 var(--space-3); font-size: 14px; line-height: 1.55; max-width: 62ch; }
.ad-wrap .ad-small { font-size: 13px; color: var(--ink-faint); }

.ad-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: var(--space-4) 0 var(--space-3); }
.ad-wrap .ad-button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--site-cobalt); color: var(--masthead-ink);
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: background-color .15s ease, transform .15s ease;
}
.ad-wrap .ad-button:hover { background: var(--site-cobalt-strong); color: var(--masthead-ink); transform: translateY(-1px); }
.ad-wrap .ad-link { color: var(--site-cobalt); font-weight: 600; text-decoration: none; }
.ad-wrap .ad-link:hover { text-decoration: underline; }
.ad-wrap a:focus-visible, .ad-wrap .ad-button:focus-visible {
  outline: var(--focus-width) solid var(--site-cobalt); outline-offset: var(--focus-offset); box-shadow: none;
}

.ad-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3);
  margin: var(--space-5) 0; padding: 0; list-style: none; counter-reset: ad-step;
}
.ad-step {
  position: relative; display: flex; align-items: center; min-height: 52px;
  margin: 0; padding: 10px 14px 10px 50px; box-sizing: border-box;
  border-radius: var(--radius-3); background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-faint);
  counter-increment: ad-step;
}
.ad-step::before {
  content: counter(ad-step);
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--canvas); color: var(--ink-faint);
}
.ad-step--now { color: var(--ink); box-shadow: 0 0 0 2px var(--site-cobalt); }
.ad-step--now::before { background: var(--site-cobalt); color: var(--masthead-ink); }
.ad-step--done { color: var(--ink); }
.ad-step--done::before { content: "\2713"; background: var(--established-bg); color: var(--established); }

.ad-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ad-card {
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--panel);
  border-top: 4px solid var(--site-cobalt);
  border-radius: 4px 4px 22px 22px;
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
}
.ad-card__label { display: block; font-size: 12px; color: var(--ink-faint); }
.ad-card__value { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.ad-card--good .ad-card__value { color: var(--established); }
.ad-card--asks { border-top-color: var(--partial); }
.ad-card--asks .ad-card__value { color: var(--partial); }

.ad-note {
  margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-3); background: var(--site-cobalt-wash);
}
.ad-note h2 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.ad-note p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-quiet); max-width: 70ch; }

.ad-console { margin: var(--space-5) 0 0; font-size: 14px; }
.ad-console a { color: var(--site-cobalt); font-weight: 600; text-decoration: none; }
.ad-console a:hover { text-decoration: underline; }

.ad-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  margin-top: var(--space-6); padding: var(--space-4) var(--space-2) 0;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-faint);
}
.ad-foot .ad-mark { display: block; }
.ad-foot a { color: var(--site-cobalt); font-weight: 600; text-decoration: none; }
.ad-foot a:hover { text-decoration: underline; }

@media (max-width: 782px) {
  .ad-steps, .ad-cards { grid-template-columns: 1fr; }
  .ad-strip { padding: var(--space-4); }
  .ad-next { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .ad-wrap .ad-button { transition: none; } .ad-wrap .ad-button:hover { transform: none; } }