/* Klarvo AI Transparency — admin design system.
 *
 * The plugin admin is styled to look like part of the Klarvo app, not part of
 * generic wp-admin. Colours, radii, shadows, typography and the button system
 * mirror the app's tokens (src/index.css / DESIGN.md): emerald primary, soft
 * shadows, 10–16px radii, the restrained-display heading treatment. Everything
 * is scoped under `.klarvo-ain` so it overrides WordPress's default chrome
 * without leaking out.
 */

.klarvo-ain {
  /* Brand + semantic tokens (mirrored from the app's --primary / --border /
     --muted-foreground etc.). */
  --k-primary: #059467; /* app --primary  hsl(161 94% 30%) */
  --k-primary-700: #047756; /* app --primary-700  hsl(163 94% 24%) */
  --k-primary-600: #058a5e;
  --k-fg: #0e1b18; /* app --foreground */
  --k-muted: #5f7669; /* 4.90:1 on #fff — WCAG AA small text */
  --k-soft: #3c4b46; /* secondary body text */
  --k-border: #e3e8e6; /* app --border */
  --k-border-strong: #cfdad5;
  --k-bg: #fff;
  --k-surface: #f6f9f8; /* app --surface-1 */
  --k-surface-2: #eef3f1; /* app --surface-2 */
  --k-accent: #effdf6; /* app --accent (light emerald tint) */
  --k-accent-border: #cdebdd;

  --k-radius: 14px;
  --k-radius-sm: 10px;
  --k-radius-pill: 999px;

  --k-shadow-sm: 0 1px 2px rgba(8, 20, 16, 0.05);
  --k-shadow-soft:
    0 4px 14px -6px rgba(8, 20, 16, 0.12), 0 1px 2px rgba(8, 20, 16, 0.04);
  --k-shadow-primary: 0 10px 26px -12px rgba(5, 148, 103, 0.5);
  --k-ring: 0 0 0 3px rgba(5, 148, 103, 0.22);

  max-width: 1120px;
  color: var(--k-fg);
  margin-right: 20px;
}

/* Tame wp-admin's default wrap spacing so our header sits cleanly. */
.klarvo-ain.wrap {
  margin-top: 6px;
}

/* ── Header / typography ─────────────────────────────────────────────────── */
.klarvo-ain-header {
  margin: 6px 0 22px;
}

/* Brand lockup — the Klarvo mark + wordmark above the page title. */
.klarvo-ain-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
}
svg.klarvo-ain-brandmark {
  height: 30px;
  width: auto;
  color: var(--k-primary);
  flex: 0 0 auto;
  display: block;
}
.klarvo-ain-brand-word {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--k-fg);
}
.klarvo-ain-h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--k-fg);
  margin: 0 0 6px;
  line-height: 1.15;
}
.klarvo-ain-sub {
  font-size: 14.5px;
  color: var(--k-muted);
  margin: 0;
  max-width: 70ch;
  line-height: 1.55;
}
.klarvo-ain-muted {
  color: var(--k-muted);
  font-size: 13px;
  line-height: 1.55;
}
.klarvo-ain .eyebrow,
.klarvo-ain-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--k-primary-700);
}
.klarvo-ain-back {
  margin: 0 0 10px;
  font-size: 13px;
}
.klarvo-ain-back a {
  color: var(--k-muted);
  text-decoration: none;
  font-weight: 500;
}
.klarvo-ain-back a:hover {
  color: var(--k-primary-700);
}

.klarvo-ain h2 {
  letter-spacing: -0.01em;
}

/* ── Layout grid ─────────────────────────────────────────────────────────── */
.klarvo-ain-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .klarvo-ain-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.klarvo-ain-card {
  background: var(--k-bg);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: var(--k-shadow-soft);
}
.klarvo-ain-card:last-child {
  margin-bottom: 0;
}
.klarvo-ain-card h2 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--k-fg);
}
.klarvo-ain-card > .klarvo-ain-muted:first-of-type {
  margin-top: 2px;
}

.klarvo-ain-row--toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.klarvo-ain-fields {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--k-border);
}
.klarvo-ain-fields p {
  margin: 0 0 16px;
}
.klarvo-ain-fields p:last-child {
  margin-bottom: 0;
}
.klarvo-ain-fields label strong,
.klarvo-ain-card label strong {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--k-fg);
}

/* ── Buttons — the Klarvo button system, overriding wp-admin defaults ─────── */
.klarvo-ain .button,
.klarvo-ain .button-secondary,
.klarvo-ain .button-primary,
.klarvo-ain .button-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: auto;
  min-height: 38px;
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--k-radius-sm);
  border: 1px solid var(--k-border-strong);
  background: #fff;
  color: var(--k-fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--k-shadow-sm);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.klarvo-ain .button:hover,
.klarvo-ain .button-secondary:hover {
  background: var(--k-surface);
  border-color: var(--k-border-strong);
  color: var(--k-fg);
}
.klarvo-ain .button:focus,
.klarvo-ain .button:focus-visible,
.klarvo-ain .button-secondary:focus {
  outline: none;
  border-color: var(--k-primary);
  box-shadow: var(--k-ring);
}

.klarvo-ain .button-primary,
.klarvo-ain .button-primary:visited {
  background: var(--k-primary);
  border-color: var(--k-primary);
  color: #fff;
  box-shadow: var(--k-shadow-primary);
  text-shadow: none;
}
.klarvo-ain .button-primary:hover {
  background: var(--k-primary-700);
  border-color: var(--k-primary-700);
  color: #fff;
  transform: translateY(-1px);
}
.klarvo-ain .button-primary:focus {
  outline: none;
  box-shadow:
    var(--k-shadow-primary),
    0 0 0 3px rgba(5, 148, 103, 0.32);
}

/* Hero (large) buttons — the primary CTAs. */
.klarvo-ain .button-hero {
  min-height: 46px;
  padding: 12px 22px;
  font-size: 14px;
  border-radius: 12px;
}
.klarvo-ain .button-hero.button-primary {
  font-weight: 600;
}

/* Icons inside buttons line up and never overflow. */
.klarvo-ain .button .dashicons {
  font-size: 17px;
  width: 17px;
  height: 17px;
  line-height: 17px;
  flex: 0 0 auto;
}

/* Link-style buttons (undo, remove). */
.klarvo-ain .button-link {
  display: inline;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--k-primary-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.klarvo-ain .button-link:hover {
  background: none;
  color: var(--k-primary-700);
  text-decoration: underline;
}
.klarvo-ain .button-link-delete {
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #b3261e;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.klarvo-ain .button-link-delete:hover {
  background: none;
  color: #8f1d17;
  text-decoration: underline;
}

/* The default WP "Save changes" submit button gets the primary treatment. */
.klarvo-ain p.submit {
  margin: 18px 0 0;
  padding: 0;
}

/* ── Form controls ───────────────────────────────────────────────────────── */
.klarvo-ain input[type="text"],
.klarvo-ain input[type="email"],
.klarvo-ain input[type="url"],
.klarvo-ain input[type="color"],
.klarvo-ain select,
.klarvo-ain textarea {
  border: 1px solid var(--k-border-strong);
  border-radius: var(--k-radius-sm);
  background: #fff;
  color: var(--k-fg);
  padding: 8px 11px;
  font-size: 13.5px;
  line-height: 1.4;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.klarvo-ain select {
  padding-right: 28px;
  min-height: 38px;
}
.klarvo-ain input[type="text"]:focus,
.klarvo-ain input[type="email"]:focus,
.klarvo-ain input[type="url"]:focus,
.klarvo-ain select:focus,
.klarvo-ain textarea:focus {
  outline: none;
  border-color: var(--k-primary);
  box-shadow: var(--k-ring);
}
.klarvo-ain input[type="color"] {
  padding: 3px;
  width: 52px;
  height: 38px;
  cursor: pointer;
}
.klarvo-ain input[type="checkbox"],
.klarvo-ain input[type="radio"] {
  border: 1.5px solid var(--k-border-strong);
}
.klarvo-ain input[type="checkbox"]:checked,
.klarvo-ain input[type="radio"]:checked {
  background: var(--k-primary);
  border-color: var(--k-primary);
}
.klarvo-ain input[type="checkbox"]:focus,
.klarvo-ain input[type="radio"]:focus {
  border-color: var(--k-primary);
  box-shadow: var(--k-ring);
  outline: none;
}
.klarvo-ain input[type="checkbox"]:checked::before {
  content: "";
}
.klarvo-ain .regular-text,
.klarvo-ain .widefat {
  max-width: 100%;
}
.klarvo-ain .fields select,
.klarvo-ain-fields select,
.klarvo-ain-fields input[type="text"] {
  min-width: 240px;
}

/* Toggle switch. */
.klarvo-ain-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}
.klarvo-ain-switch input {
  position: absolute;
  opacity: 0;
  width: 46px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}
.klarvo-ain-switch-track {
  width: 46px;
  height: 26px;
  border-radius: var(--k-radius-pill);
  background: #ccd6d1;
  transition: background 0.18s ease;
  position: relative;
}
.klarvo-ain-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(8, 20, 16, 0.25);
  transition: transform 0.18s ease;
}
.klarvo-ain-switch input:checked + .klarvo-ain-switch-track {
  background: var(--k-primary);
}
.klarvo-ain-switch input:checked + .klarvo-ain-switch-track::after {
  transform: translateX(20px);
}
.klarvo-ain-switch input:focus-visible + .klarvo-ain-switch-track {
  outline: none;
  box-shadow: var(--k-ring);
}

/* ── Tools list ──────────────────────────────────────────────────────────── */
.klarvo-ain-tools {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.klarvo-ain-tools li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--k-border);
  flex-wrap: wrap;
}
.klarvo-ain-tools li:last-child {
  border-bottom: 0;
}
.klarvo-ain-tools label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.klarvo-ain-tool-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--k-fg);
}
.klarvo-ain-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--k-radius-pill);
  background: var(--k-accent);
  color: var(--k-primary-700);
  border: 1px solid var(--k-accent-border);
  text-transform: capitalize;
  white-space: nowrap;
}
.klarvo-ain-chip--muted {
  background: var(--k-surface-2);
  color: var(--k-muted);
  border-color: var(--k-border);
}
.klarvo-ain-art {
  font-size: 11px;
  color: var(--k-muted);
  margin-left: auto;
}
.klarvo-ain-manual-fields {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.klarvo-ain-details {
  margin-top: 16px;
  border-top: 1px solid var(--k-border);
  padding-top: 14px;
}
.klarvo-ain-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--k-primary-700);
}
.klarvo-ain-details summary:hover {
  text-decoration: underline;
}

/* ── Connect card ────────────────────────────────────────────────────────── */
.klarvo-ain-connected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--k-primary-700);
  margin: 0 0 8px;
}
.klarvo-ain-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--k-primary);
  box-shadow: 0 0 0 3px rgba(5, 148, 103, 0.18);
}
.klarvo-ain-meta p {
  margin: 4px 0;
  font-size: 12px;
  color: var(--k-muted);
}

/* ── Tables (the literacy register etc.) ─────────────────────────────────── */
.klarvo-ain table.widefat {
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: none;
}
.klarvo-ain table.widefat thead th {
  background: var(--k-surface);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--k-muted);
  border-bottom: 1px solid var(--k-border);
  padding: 10px 14px;
}
.klarvo-ain table.widefat td {
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--k-fg);
  border-bottom: 1px solid var(--k-border);
}
.klarvo-ain table.widefat tbody tr:last-child td {
  border-bottom: 0;
}
.klarvo-ain table.widefat.striped tbody tr:nth-child(odd) {
  background: #fbfdfc;
}
.klarvo-ain-card table.widefat {
  margin-top: 14px;
}
.klarvo-ain-cell-right {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}
.klarvo-ain-register-empty {
  margin-top: 14px;
}
.klarvo-ain-tools .dashicons-yes {
  color: var(--k-primary);
}

/* ── AI-literacy pack (Article 4) ────────────────────────────────────────── */
.klarvo-ain-section-h {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--k-muted);
  margin: 18px 0 10px;
}
/* Questionnaire choices (self-assessment) + small headings. */
.klarvo-ain-fieldset {
  border: 0;
  margin: 0 0 16px;
  padding: 0;
}
.klarvo-ain-fieldset legend,
.klarvo-ain-q {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--k-fg);
  margin: 0 0 6px;
  padding: 0;
}
.klarvo-ain-q {
  margin: 16px 0 4px;
}
.klarvo-ain-choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--k-soft);
  line-height: 1.45;
}
.klarvo-ain-choice strong {
  color: var(--k-fg);
}
.klarvo-ain-choice input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.klarvo-ain-choice-sub {
  margin: 2px 0 6px 30px;
  padding: 11px 14px;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-sm);
}
.klarvo-ain-assessed {
  font-size: 12px;
  color: var(--k-muted);
}

.klarvo-ain-literacy-points {
  margin: 8px 0 0;
  padding: 0 0 0 4px;
  list-style: none;
  counter-reset: kpt;
}
.klarvo-ain-literacy-points li {
  position: relative;
  counter-increment: kpt;
  padding: 0 0 12px 38px;
  font-size: 13.5px;
  color: var(--k-soft);
  line-height: 1.55;
}
.klarvo-ain-literacy-points li::before {
  content: counter(kpt);
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--k-accent);
  color: var(--k-primary-700);
  border: 1px solid var(--k-accent-border);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.klarvo-ain-ack-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.klarvo-ain-ack-form .regular-text {
  flex: 1 1 240px;
  min-width: 0;
}

/* A subtle "info" panel used for asides + why-this-matters notes. */
.klarvo-ain-note {
  font-size: 13px;
  color: var(--k-soft);
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-sm);
  padding: 13px 15px;
  line-height: 1.55;
}

/* WordPress success/error notices, brought into the Klarvo palette. */
.klarvo-ain .notice {
  border-radius: var(--k-radius-sm);
  border-left-width: 4px;
  box-shadow: var(--k-shadow-sm);
}