/*
 * Shared presentation layer for Bright Sparks VS comparison articles.
 * Keeps the existing comparison content while using the site's dark
 * editorial system rather than the legacy paper-style template.
 */
:root {
  --paper: #00112a;
  --bg: #00112a;
  --white: #0f203b;
  --ink: #e8eef7;
  --navy: #0b1d38;
  --muted: #a1afc2;
  --hair: rgba(148, 163, 184, 0.18);
  --hair-2: rgba(148, 163, 184, 0.1);
  --line: rgba(148, 163, 184, 0.16);
  --neg: #fb7185;
  --pos: #5eead4;
  --art-accent: #38bdf8;
  --art-accent-soft: rgba(56, 189, 248, 0.12);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

body {
  background: #00112a;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}

.vs-article-outer {
  padding-top: 80px;
  background:
    radial-gradient(circle at 86% 5%, rgba(56, 189, 248, 0.1), transparent 28rem),
    #00112a;
  color: var(--ink);
}

.vs-article-outer .wrap {
  max-width: 960px;
}

.vs-article-outer .crumb,
.vs-article-outer .crumb a {
  color: var(--muted);
}

.vs-article-outer .hero {
  padding: 2.5rem 0 2.75rem;
  border-bottom-color: var(--hair);
}

.vs-article-outer .eyebrow,
.vs-article-outer .q-num,
.vs-article-outer .meth dt {
  color: #38bdf8;
}

.vs-article-outer h1,
.vs-article-outer h2,
.vs-article-outer h3 {
  color: #f8fafc;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.vs-article-outer h1 {
  max-width: 20ch;
  font-size: clamp(2.35rem, 5vw, 4rem);
  line-height: 1.05;
}

.vs-article-outer h2 {
  max-width: 28ch;
}

.vs-article-outer .answer {
  color: #cbd5e1;
}

.vs-article-outer .answer .lead,
.vs-article-outer .byline time,
.vs-article-outer .figure-n {
  color: #f8fafc;
}

.vs-article-outer .byline,
.vs-article-outer .stripnote,
.vs-article-outer .fig p,
.vs-article-outer .dlegend,
.vs-article-outer .cono,
.vs-article-outer .meth dd,
.vs-article-outer .cta p,
.vs-article-outer footer {
  color: var(--muted);
}

.vs-article-outer section {
  border-bottom-color: var(--hair-2);
}

.vs-article-outer .h2h,
.vs-article-outer .opan,
.vs-article-outer .awards,
.vs-article-outer .debcard,
.vs-article-outer .cta {
  background: rgba(15, 32, 59, 0.78);
  border-color: var(--hair);
  border-radius: 0.9rem;
}

.vs-article-outer .h2h .cap.g,
.vs-article-outer .opan.g .opan-top {
  background: #123b62;
}

.vs-article-outer .h2h .cap.j,
.vs-article-outer .opan.j .opan-top {
  background: #854229;
}

.vs-article-outer .h2h .row,
.vs-article-outer .awards .ar,
.vs-article-outer table.ledger td,
.vs-article-outer table.ledger th,
.vs-article-outer details {
  border-color: var(--hair-2);
}

.vs-article-outer .h2h .v.g {
  color: #7dd3fc;
}

.vs-article-outer .h2h .v.j {
  color: #fdba74;
}

.vs-article-outer .h2h .lbl,
.vs-article-outer .opan-body dt,
.vs-article-outer .opan-body dd,
.vs-article-outer .debcard ul {
  color: var(--muted);
}

.vs-article-outer .callout {
  background: rgba(56, 189, 248, 0.08);
  border-left-color: #38bdf8;
}

.vs-article-outer .callout p,
.vs-article-outer .callout .yr,
.vs-article-outer .awards .prize,
.vs-article-outer table.ledger,
.vs-article-outer summary {
  color: var(--ink);
}

.vs-article-outer .awards .win.g {
  background: rgba(125, 211, 252, 0.14);
  color: #7dd3fc;
}

.vs-article-outer .awards .win.j {
  background: rgba(253, 186, 116, 0.14);
  color: #fdba74;
}

.vs-article-outer .takeaways {
  background: linear-gradient(135deg, #102d50, #0e203a);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 0.9rem;
}

.vs-article-outer .btn {
  background: linear-gradient(135deg, #0284c7, #06b6d4);
  border-radius: 0.7rem;
}

.vs-article-outer .btn:hover {
  background: linear-gradient(135deg, #0369a1, #0891b2);
  text-decoration: none;
}

.vs-article-outer a {
  color: #7dd3fc;
}

.vs-article-outer svg text {
  fill: var(--ink);
}

[data-theme="light"] {
  --paper: #fafaf6;
  --bg: #fafbfc;
  --white: #ffffff;
  --ink: #15191c;
  --navy: #102a38;
  --muted: #67675e;
  --hair: #dcdad0;
  --hair-2: #eceae1;
  --line: #e7eaf0;
  --neg: #b42318;
  --pos: #1b6b4a;
  --art-accent: #0e4a43;
  --art-accent-soft: #e0f4fb;
  --shadow: 0 8px 24px rgba(0, 17, 42, 0.07), 0 2px 6px rgba(0, 17, 42, 0.05);
}

[data-theme="light"] body {
  background: var(--paper);
  color: var(--ink);
}

[data-theme="light"] .vs-article-outer {
  background:
    radial-gradient(circle at 86% 5%, rgba(2, 132, 199, 0.08), transparent 28rem),
    var(--paper);
  color: var(--ink);
}

[data-theme="light"] .vs-article-outer h1,
[data-theme="light"] .vs-article-outer h2,
[data-theme="light"] .vs-article-outer h3,
[data-theme="light"] .vs-article-outer .answer .lead,
[data-theme="light"] .vs-article-outer .byline time,
[data-theme="light"] .vs-article-outer .figure-n {
  color: var(--navy);
}

[data-theme="light"] .vs-article-outer .answer {
  color: #334155;
}

[data-theme="light"] .vs-article-outer .h2h,
[data-theme="light"] .vs-article-outer .opan,
[data-theme="light"] .vs-article-outer .awards,
[data-theme="light"] .vs-article-outer .debcard,
[data-theme="light"] .vs-article-outer .cta {
  background: #ffffff;
  border-color: var(--hair);
}

[data-theme="light"] .vs-article-outer .callout {
  background: rgba(2, 132, 199, 0.07);
}

[data-theme="light"] .vs-article-outer .callout p,
[data-theme="light"] .vs-article-outer .callout .yr,
[data-theme="light"] .vs-article-outer .awards .prize,
[data-theme="light"] .vs-article-outer table.ledger,
[data-theme="light"] .vs-article-outer summary {
  color: var(--ink);
}

[data-theme="light"] .vs-article-outer a {
  color: #0369a1;
}

[data-theme="light"] .vs-article-outer svg text {
  fill: var(--ink);
}

[data-theme="light"] body > footer#site-footer {
  background: var(--surface-footer) !important;
  border-color: var(--border-default) !important;
}

@media (max-width: 640px) {
  .vs-article-outer .hero {
    padding-top: 1.8rem;
  }

  .vs-article-outer h1 {
    font-size: 2.35rem;
  }
}