/* ============================================================
   EvvyTools — Editorial Component Library
   ============================================================
   Shared CSS for the 250–300 word editorial block rendered above
   every tool UI. Loaded automatically by tool-shell-top.php on
   every tool page. See EDITORIAL_TODO.md for the per-tool variant
   selection protocol and HTML composition rules.

   Naming convention:
     .ed-{component}-{variant}   wrapper classes
     .ed-{component}-{element}   inner element classes
     .ed-callout-{kind}-{variant}  privacy/limits callouts

   All colors use cluster custom properties so the editorial block
   inherits the tool's cluster theme automatically.
   ============================================================ */

/* ---------- Container (one rule, shared across all variants) ---------- */
.evvy-tool-editorial {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--evvy-text, #1e293b);
  padding: 0;
  margin-bottom: 1.5rem;
}
.evvy-tool-editorial > * + * { margin-top: 0.85rem; }
.evvy-tool-editorial p { margin: 0; }

/* ============================================================
   A. Headline (2 variants)
   ============================================================ */
.ed-headline-plain,
.ed-headline-kicker { padding: 0; margin: 0 0 0.5rem; }

.ed-headline-plain .ed-headline-title,
.ed-headline-kicker .ed-headline-title {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cluster-dark, #1A237E);
  letter-spacing: -0.01em;
}
.ed-headline-plain .ed-headline-lede,
.ed-headline-kicker .ed-headline-lede {
  font-size: 0.975rem;
  color: var(--evvy-text-secondary, #555);
  margin: 0;
}
.ed-headline-kicker .ed-headline-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cluster-dark, #1A237E);
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 10%, transparent);
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
  margin-bottom: 0.45rem;
}

/* ============================================================
   B. Stat row (3 variants)
   ============================================================ */
/* Shared stat cell internals */
.ed-stat {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.ed-stat-icon {
  font-size: 1.4rem;
  color: var(--cluster-dark, #1A237E);
  flex-shrink: 0;
}
.ed-stat-value {
  font-weight: 800;
  line-height: 1;
  color: var(--cluster-dark, #1A237E);
  font-variant-numeric: tabular-nums;
}
.ed-stat-label {
  font-size: 0.78rem;
  color: var(--evvy-text-secondary, #777);
  line-height: 1.25;
}

/* Variant B1 — cards (default) */
.ed-stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
}
.ed-stats-cards .ed-stat {
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 7%, transparent);
  border-radius: 0.6rem;
  padding: 0.65rem 0.75rem;
}
.ed-stats-cards .ed-stat-value { font-size: 1.05rem; }
@media (max-width: 575.98px) { .ed-stats-cards { grid-template-columns: repeat(2, 1fr); } }

/* Variant B2 — strip with vertical dividers */
.ed-stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 18%, transparent);
}
.ed-stats-strip .ed-stat {
  padding-left: 1.5rem;
  border-left: 1px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 18%, transparent);
}
.ed-stats-strip .ed-stat:first-child { padding-left: 0; border-left: none; }
.ed-stats-strip .ed-stat-value { font-size: 1.25rem; }

/* Variant B3 — 2x2 prominent grid */
.ed-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
.ed-stats-grid .ed-stat {
  padding: 1rem 1.1rem;
  background: var(--cluster-surface, #E8EAF6);
  border-radius: 0.7rem;
  gap: 0.85rem;
}
.ed-stats-grid .ed-stat-icon { font-size: 1.85rem; }
.ed-stats-grid .ed-stat-value { font-size: 1.7rem; }
.ed-stats-grid .ed-stat-label { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 575.98px) { .ed-stats-grid { grid-template-columns: 1fr; } }

/* ============================================================
   C. Persona cards (2 variants)
   ============================================================ */
.ed-personas-cards,
.ed-personas-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
@media (max-width: 767.98px) {
  .ed-personas-cards,
  .ed-personas-icons { grid-template-columns: 1fr; }
}
.ed-persona { background: var(--cluster-surface, #E8EAF6); border-radius: 0.7rem; padding: 0.85rem 0.95rem; }
.ed-persona-icon {
  font-size: 1.5rem;
  color: var(--cluster-dark, #1A237E);
  margin-bottom: 0.4rem;
  display: block;
}
.ed-persona-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cluster-dark, #1A237E);
  margin-bottom: 0.25rem;
}
.ed-persona-body {
  font-size: 0.825rem;
  color: var(--evvy-text-secondary, #555);
  line-height: 1.5;
}

/* Variant C1 — cards (default) */
/* Uses the defaults above */

/* Variant C2 — icon-prominent stack */
.ed-personas-icons .ed-persona {
  background: transparent;
  border-left: 3px solid var(--cluster-dark, #1A237E);
  padding-left: 0.85rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 0;
}
.ed-personas-icons .ed-persona-icon { font-size: 1.3rem; margin-bottom: 0.2rem; }

/* ============================================================
   D. SVG diagram wrapper (3 variants)
   ============================================================ */
.ed-diagram-bordered,
.ed-diagram-bare,
.ed-diagram-tinted {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.85rem;
  margin: 0;
}
.ed-diagram-bordered {
  border: 1px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 18%, transparent);
  border-radius: 0.7rem;
}
.ed-diagram-bare { padding: 0.3rem 0; }
.ed-diagram-tinted {
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 5%, transparent);
  border-radius: 0.7rem;
}
.ed-diagram-bordered svg,
.ed-diagram-bare svg,
.ed-diagram-tinted svg {
  max-width: 100%;
  height: auto;
}
.ed-diagram-caption {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--evvy-text-secondary, #777);
  margin-top: 0.3rem;
  font-style: italic;
}

/* ============================================================
   E. Data-source badges (3 variants)
   ============================================================ */
.ed-sources-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--evvy-text-secondary, #777);
  margin-bottom: 0.45rem;
}

/* Variant E1 — pills */
.ed-sources-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ed-sources-pills .ed-source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 8%, transparent);
  color: var(--cluster-dark, #1A237E);
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.ed-sources-pills .ed-source i { font-size: 0.85rem; }

/* Variant E2 — angled tags */
.ed-sources-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ed-sources-tags .ed-source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem 0.3rem 0.85rem;
  background: var(--cluster-surface, #E8EAF6);
  color: var(--cluster-dark, #1A237E);
  font-size: 0.8rem;
  font-weight: 600;
  clip-path: polygon(0.55rem 0, 100% 0, 100% 100%, 0.55rem 100%, 0 50%);
}

/* Variant E3 — inline text list */
.ed-sources-list {
  font-size: 0.85rem;
  color: var(--evvy-text-secondary, #555);
  line-height: 1.7;
}
.ed-sources-list .ed-source {
  display: inline;
  font-weight: 600;
  color: var(--cluster-dark, #1A237E);
}
.ed-sources-list .ed-source:not(:last-child)::after { content: " · "; color: var(--evvy-text-secondary, #777); font-weight: 400; }

/* ============================================================
   F. Feature checklist (3 variants)
   ============================================================ */
.ed-features-checks,
.ed-features-bullets,
.ed-features-numbers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem 1.2rem;
  font-size: 0.9rem;
}
@media (max-width: 575.98px) {
  .ed-features-checks,
  .ed-features-bullets,
  .ed-features-numbers { grid-template-columns: 1fr; }
}
.ed-features-checks li,
.ed-features-bullets li,
.ed-features-numbers li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.2rem 0;
}

/* Variant F1 — check icons */
.ed-features-checks li::before {
  content: "\f26b"; /* bi-check-circle-fill */
  font-family: "bootstrap-icons";
  color: var(--cluster-dark, #1A237E);
  flex-shrink: 0;
  margin-top: 0.05rem;
  font-size: 1rem;
}

/* Variant F2 — colored bullet dots */
.ed-features-bullets li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--cluster-dark, #1A237E);
}

/* Variant F3 — numbered circles */
.ed-features-numbers { counter-reset: ed-feat; }
.ed-features-numbers li {
  counter-increment: ed-feat;
}
.ed-features-numbers li::before {
  content: counter(ed-feat);
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--cluster-dark, #1A237E);
  color: var(--cluster-text, #fff);
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
}

/* ============================================================
   G. Privacy callout (3 variants)
   ============================================================ */
:root {
  --ed-privacy-color: #2E7D32;
  --ed-privacy-color-dark: #1B5E20;
}
[data-bs-theme="dark"] {
  --ed-privacy-color: #66BB6A;
  --ed-privacy-color-dark: #A5D6A7;
}
.ed-callout-privacy-side,
.ed-callout-privacy-banner,
.ed-callout-privacy-card { font-size: 0.875rem; line-height: 1.5; }
.ed-callout-privacy-side .ed-callout-title,
.ed-callout-privacy-banner .ed-callout-title,
.ed-callout-privacy-card .ed-callout-title {
  font-weight: 700;
  color: var(--ed-privacy-color-dark);
  margin-bottom: 0.2rem;
}
.ed-callout-privacy-side .ed-callout-icon,
.ed-callout-privacy-banner .ed-callout-icon,
.ed-callout-privacy-card .ed-callout-icon {
  color: var(--ed-privacy-color);
  flex-shrink: 0;
  font-size: 1.3rem;
}

/* Variant G1 — left side border */
.ed-callout-privacy-side {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--ed-privacy-color) 9%, transparent);
  border-left: 3px solid var(--ed-privacy-color);
  border-radius: 0 0.6rem 0.6rem 0;
}

/* Variant G2 — top banner */
.ed-callout-privacy-banner {
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--ed-privacy-color) 10%, transparent);
  border-top: 3px solid var(--ed-privacy-color);
  border-radius: 0 0 0.6rem 0.6rem;
  text-align: center;
}
.ed-callout-privacy-banner .ed-callout-icon { display: block; margin: 0 auto 0.35rem; }
.ed-callout-privacy-banner .ed-callout-title { margin-bottom: 0.35rem; }

/* Variant G3 — full card */
.ed-callout-privacy-card {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: color-mix(in srgb, var(--ed-privacy-color) 14%, transparent);
  border-radius: 0.7rem;
}

/* ============================================================
   H. Limits / disclaimer callout (3 variants)
   ============================================================ */
:root {
  --ed-limits-color: #EF6C00;
  --ed-limits-color-dark: #8D4500;
}
[data-bs-theme="dark"] {
  --ed-limits-color: #FFB74D;
  --ed-limits-color-dark: #FFCC80;
}
.ed-callout-limits-side,
.ed-callout-limits-banner,
.ed-callout-limits-card { font-size: 0.875rem; line-height: 1.5; }
.ed-callout-limits-side .ed-callout-title,
.ed-callout-limits-banner .ed-callout-title,
.ed-callout-limits-card .ed-callout-title {
  font-weight: 700;
  color: var(--ed-limits-color-dark);
  margin-bottom: 0.2rem;
}
.ed-callout-limits-side .ed-callout-icon,
.ed-callout-limits-banner .ed-callout-icon,
.ed-callout-limits-card .ed-callout-icon {
  color: var(--ed-limits-color);
  flex-shrink: 0;
  font-size: 1.3rem;
}

/* Variant H1 — left side border */
.ed-callout-limits-side {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--ed-limits-color) 9%, transparent);
  border-left: 3px solid var(--ed-limits-color);
  border-radius: 0 0.6rem 0.6rem 0;
}

/* Variant H2 — top banner */
.ed-callout-limits-banner {
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--ed-limits-color) 10%, transparent);
  border-top: 3px solid var(--ed-limits-color);
  border-radius: 0 0 0.6rem 0.6rem;
  text-align: center;
}
.ed-callout-limits-banner .ed-callout-icon { display: block; margin: 0 auto 0.35rem; }
.ed-callout-limits-banner .ed-callout-title { margin-bottom: 0.35rem; }

/* Variant H3 — full card */
.ed-callout-limits-card {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: color-mix(in srgb, var(--ed-limits-color) 14%, transparent);
  border-radius: 0.7rem;
}

/* ============================================================
   I. Related tools (3 variants)
   ============================================================ */
.ed-related-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--evvy-text-secondary, #777);
  margin-bottom: 0.45rem;
}

/* Variant I1 — pills */
.ed-related-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ed-related-pills .ed-related-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: var(--cluster-surface, #E8EAF6);
  color: var(--cluster-dark, #1A237E);
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.ed-related-pills .ed-related-link:hover {
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 22%, transparent);
  transform: translateY(-1px);
}

/* Variant I2 — small cards */
.ed-related-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
@media (max-width: 575.98px) { .ed-related-cards { grid-template-columns: 1fr; } }
.ed-related-cards .ed-related-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--cluster-surface, #E8EAF6);
  color: var(--cluster-dark, #1A237E);
  border-radius: 0.5rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 12%, transparent);
  transition: background 160ms ease, border-color 160ms ease;
}
.ed-related-cards .ed-related-link:hover {
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 14%, transparent);
  border-color: color-mix(in srgb, var(--cluster-dark, #1A237E) 30%, transparent);
}
.ed-related-cards .ed-related-link i { color: var(--cluster-dark, #1A237E); font-size: 1rem; flex-shrink: 0; }

/* Variant I3 — inline text */
.ed-related-inline {
  font-size: 0.875rem;
  color: var(--evvy-text-secondary, #555);
}
.ed-related-inline .ed-related-link {
  color: var(--cluster-dark, #1A237E);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--cluster-dark, #1A237E) 40%, transparent);
}
.ed-related-inline .ed-related-link:hover {
  text-decoration-color: var(--cluster-dark, #1A237E);
}
.ed-related-inline .ed-related-link:not(:last-child)::after { content: " · "; color: var(--evvy-text-secondary, #777); font-weight: 400; }

/* ============================================================
   J. Last-reviewed pill (single variant)
   ============================================================ */
.ed-reviewed {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 8%, transparent);
  border-radius: 1rem;
  font-size: 0.8rem;
  color: var(--evvy-text-secondary, #555);
}
.ed-reviewed-icon { color: var(--cluster-dark, #1A237E); font-size: 0.95rem; }
.ed-reviewed-date { color: var(--cluster-dark, #1A237E); font-weight: 700; font-variant-numeric: tabular-nums; }
.ed-reviewed-sep { color: var(--evvy-text-secondary, #999); }
.ed-reviewed-note { color: var(--evvy-text-secondary, #777); font-size: 0.75rem; }

/* ============================================================
   K. Comparison / spec mini-table (3 variants)
   ============================================================ */
.ed-table-bordered,
.ed-table-striped,
.ed-table-flush {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}
.ed-table-bordered th,
.ed-table-bordered td,
.ed-table-striped th,
.ed-table-striped td,
.ed-table-flush th,
.ed-table-flush td {
  padding: 0.55rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.ed-table-bordered th,
.ed-table-striped th,
.ed-table-flush th {
  font-weight: 700;
  color: var(--cluster-dark, #1A237E);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Variant K1 — bordered */
.ed-table-bordered {
  border: 1px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 18%, transparent);
  border-radius: 0.6rem;
  overflow: hidden;
}
.ed-table-bordered thead { background: var(--cluster-surface, #E8EAF6); }
.ed-table-bordered tbody tr { border-top: 1px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 10%, transparent); }

/* Variant K2 — striped */
.ed-table-striped thead { border-bottom: 2px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 22%, transparent); }
.ed-table-striped tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--cluster-dark, #1A237E) 5%, transparent); }

/* Variant K3 — flush, dividers only */
.ed-table-flush thead { border-bottom: 1px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 22%, transparent); }
.ed-table-flush tbody tr + tr { border-top: 1px solid color-mix(in srgb, var(--cluster-dark, #1A237E) 10%, transparent); }
.ed-table-flush th,
.ed-table-flush td { padding-left: 0; padding-right: 0; }

/* ============================================================
   L. Animated counter (single variant — flagship tools only)
   ============================================================ */
.ed-counter {
  text-align: center;
  padding: 1.1rem 1rem;
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 6%, transparent);
  border-radius: 0.75rem;
}
.ed-counter-value {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--cluster-dark, #1A237E);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.3rem;
}
.ed-counter-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--evvy-text-secondary, #777);
}

/* ============================================================
   Dark-mode adjustments
   ============================================================ */
[data-bs-theme="dark"] .ed-stats-cards .ed-stat,
[data-bs-theme="dark"] .ed-persona,
[data-bs-theme="dark"] .ed-personas-icons .ed-persona {
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 14%, #1a1a1a);
}
[data-bs-theme="dark"] .ed-stats-grid .ed-stat {
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 18%, #1a1a1a);
}
[data-bs-theme="dark"] .ed-diagram-bordered {
  border-color: color-mix(in srgb, var(--cluster-dark, #1A237E) 30%, transparent);
}
[data-bs-theme="dark"] .ed-diagram-tinted,
[data-bs-theme="dark"] .ed-table-bordered thead,
[data-bs-theme="dark"] .ed-counter {
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 14%, #1a1a1a);
}
[data-bs-theme="dark"] .ed-related-pills .ed-related-link,
[data-bs-theme="dark"] .ed-related-cards .ed-related-link,
[data-bs-theme="dark"] .ed-sources-tags .ed-source {
  background: color-mix(in srgb, var(--cluster-dark, #1A237E) 18%, #1a1a1a);
  color: var(--cluster-text, #ECEDF8);
}
[data-bs-theme="dark"] .ed-headline-plain .ed-headline-title,
[data-bs-theme="dark"] .ed-headline-kicker .ed-headline-title,
[data-bs-theme="dark"] .ed-stat-icon,
[data-bs-theme="dark"] .ed-stat-value,
[data-bs-theme="dark"] .ed-persona-icon,
[data-bs-theme="dark"] .ed-persona-title,
[data-bs-theme="dark"] .ed-sources-pills .ed-source,
[data-bs-theme="dark"] .ed-table-bordered th,
[data-bs-theme="dark"] .ed-table-striped th,
[data-bs-theme="dark"] .ed-table-flush th,
[data-bs-theme="dark"] .ed-counter-value,
[data-bs-theme="dark"] .ed-reviewed-date,
[data-bs-theme="dark"] .ed-reviewed-icon {
  color: var(--cluster-text, #ECEDF8);
}