/* Shared visual shell for reusable infographic fragments.
   This gives each section a consistent frame while preserving each fragment's own inner styling. */
[data-infographic-fragment-shell] {
  --ifg-shell-border: rgba(122, 162, 247, 0.26);
  --ifg-shell-top: rgba(122, 162, 247, 0.14);
  --ifg-shell-mid: rgba(6, 182, 212, 0.08);
  --ifg-shell-base: rgba(11, 15, 25, 0.46);
  --ifg-shell-highlight: rgba(217, 70, 239, 0.36);
  position: relative;
  border-radius: 1rem;
  padding: clamp(0.35rem, 0.8vw, 0.65rem);
  border: 1px solid var(--ifg-shell-border);
  background: linear-gradient(180deg, var(--ifg-shell-top) 0%, var(--ifg-shell-mid) 42%, var(--ifg-shell-base) 100%);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: clip;
  isolation: isolate;
}

/* Keep chapter pacing consistent when fragments are embedded in prose. */
.content:not(.infographic-presentation) [data-infographic-fragment-shell] {
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.4rem, 2.8vw, 2rem);
}

/* Give chapter-embedded infographic-3 sections a little more usable canvas
   while preserving shell border + section-id badge in book context. */
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-3.html"][data-infographic-fragment-shell] {
  padding: clamp(0.24rem, 0.55vw, 0.42rem);
}

/* Apply the same shell tightening to chapter-embedded infographic-1 sections. */
.content:not(.infographic-presentation)
  [data-infographic-source="infographic.html"][data-infographic-fragment-shell] {
  padding: clamp(0.24rem, 0.55vw, 0.42rem);
}

/* Apply the same shell tightening to chapter-embedded infographic-2 sections. */
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"][data-infographic-fragment-shell] {
  padding: clamp(0.24rem, 0.55vw, 0.42rem);
}

/* Tighten inner card spacing across infographic-3 chapter embeds. */
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-3.html"] > .bg-brand-surface {
  padding: clamp(0.95rem, 1.5vw, 1.2rem);
}

/* Tighten top-level cards across infographic-1 chapter embeds. */
.content:not(.infographic-presentation)
  [data-infographic-source="infographic.html"] > .bg-brand-surface,
.content:not(.infographic-presentation)
  [data-infographic-source="infographic.html"] > .bg-brand-dark {
  padding: clamp(0.95rem, 1.5vw, 1.2rem);
}

/* Tighten root cards in infographic-2 chapter embeds where p-8 drives crowding. */
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"].p-8 {
  padding: clamp(0.95rem, 1.5vw, 1.2rem);
}

/* In prose context, force top-level infographic-2 two-column shells to stack. */
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"].grid.grid-cols-1.lg\:grid-cols-12,
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"] > .grid.grid-cols-1.lg\:grid-cols-12 {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"].grid.grid-cols-1.lg\:grid-cols-12 > [class*="lg:col-span-"],
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"] > .grid.grid-cols-1.lg\:grid-cols-12 > [class*="lg:col-span-"] {
  grid-column: span 1 / span 1;
}

/* Make infographic-2 chapter embeds feel closer to i1/i3 shell language:
   softer panel chrome, slightly brighter copy, and tighter internal grouping. */
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"].grid.grid-cols-1.lg\:grid-cols-12 {
  padding: clamp(0.95rem, 1.5vw, 1.2rem);
  border-radius: 0.85rem;
  border: 1px solid rgba(122, 162, 247, 0.2);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.66) 0%, rgba(14, 20, 34, 0.56) 100%);
}

.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"] .bg-cyber-panel {
  background: linear-gradient(180deg, rgba(17, 25, 41, 0.9) 0%, rgba(13, 19, 33, 0.9) 100%);
  border-color: rgba(122, 162, 247, 0.24);
  box-shadow: 0 14px 30px rgba(3, 8, 20, 0.45);
}

.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"] .text-cyber-muted,
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"] .text-gray-400,
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"] .text-gray-500 {
  color: rgba(180, 194, 224, 0.9);
}

.content:not(.infographic-presentation)
  [data-infographic-source="infographic-2.html"] .scale-button {
  border-color: rgba(122, 162, 247, 0.34);
  background: rgba(18, 26, 44, 0.78);
  color: rgba(209, 219, 241, 0.95);
}

/* Stack the primary split layout for infographic-3 sections in prose context. */
.content:not(.infographic-presentation)
  [data-infographic-source="infographic-3.html"] > .bg-brand-surface > .flex.flex-col.lg\:flex-row {
  flex-direction: column;
  gap: 1rem;
}

.content:not(.infographic-presentation)
  [data-infographic-source="infographic-3.html"] > .bg-brand-surface > .flex.flex-col.lg\:flex-row > [class*="lg:w-"] {
  width: 100%;
}

/* In prose chapters, keep the substrate file tree + file viewer stacked.
   The chapter container is intentionally narrow, so two columns become cramped. */
.content:not(.infographic-presentation)
  [data-infographic-section-id="i3-section-01-substrate"]
  .substrate-dual-panel {
  grid-template-columns: minmax(0, 1fr);
}

.content:not(.infographic-presentation)
  [data-infographic-section-id="i3-section-01-substrate"]
  .substrate-main-layout {
  flex-direction: column;
}

.content:not(.infographic-presentation)
  [data-infographic-section-id="i3-section-01-substrate"]
  .substrate-main-copy,
.content:not(.infographic-presentation)
  [data-infographic-section-id="i3-section-01-substrate"]
  .substrate-main-workspace {
  width: 100%;
}

[data-infographic-fragment-shell]::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ifg-shell-highlight), transparent);
  opacity: 0.8;
  z-index: 0;
}

[data-infographic-fragment-shell] > [data-infographic-fragment-label] {
  position: absolute;
  top: 0.42rem;
  right: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(11, 12, 16, 0.72);
  color: rgba(229, 231, 235, 0.86);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: nowrap;
  cursor: text;
  user-select: all;
  -webkit-user-select: all;
  z-index: 2;
}

[data-infographic-fragment-shell] > :not([data-infographic-fragment-label]) {
  position: relative;
  z-index: 1;
}

body.bg-brand-dark [data-infographic-fragment-shell] {
  --ifg-shell-border: rgba(122, 162, 247, 0.24);
  --ifg-shell-top: rgba(122, 162, 247, 0.13);
  --ifg-shell-mid: rgba(187, 154, 247, 0.08);
  --ifg-shell-base: rgba(11, 12, 16, 0.50);
  --ifg-shell-highlight: rgba(42, 195, 222, 0.40);
}

body.bg-cyber-dark [data-infographic-fragment-shell] {
  --ifg-shell-border: rgba(99, 102, 241, 0.28);
  --ifg-shell-top: rgba(99, 102, 241, 0.16);
  --ifg-shell-mid: rgba(6, 182, 212, 0.09);
  --ifg-shell-base: rgba(11, 15, 25, 0.54);
  --ifg-shell-highlight: rgba(217, 70, 239, 0.48);
}

.infographic-deck [data-infographic-fragment-shell] {
  padding: clamp(0.25rem, 0.6vw, 0.5rem);
}

.infographic-deck [data-infographic-fragment-shell] > [data-infographic-fragment-label] {
  display: none;
}

@media (max-width: 768px) {
  .content:not(.infographic-presentation)
    [data-infographic-source="infographic-3.html"][data-infographic-fragment-shell] {
    padding: 0.24rem;
  }

  .content:not(.infographic-presentation)
    [data-infographic-source="infographic.html"][data-infographic-fragment-shell] {
    padding: 0.24rem;
  }

  .content:not(.infographic-presentation)
    [data-infographic-source="infographic-2.html"][data-infographic-fragment-shell] {
    padding: 0.24rem;
  }

  [data-infographic-fragment-shell] {
    border-radius: 0.85rem;
    padding: 0.32rem;
  }

  [data-infographic-fragment-shell] > [data-infographic-fragment-label] {
    font-size: 0.58rem;
    top: 0.36rem;
    right: 0.42rem;
    padding: 0.08rem 0.34rem;
  }
}