/* CAE-aligned illustrative vCon enrichment */
.vcon-enrichment-slide {
  background:
    radial-gradient(circle at 7% 77%, rgba(57, 210, 238, 0.07), transparent 28rem),
    radial-gradient(circle at 93% 18%, rgba(167, 139, 250, 0.08), transparent 30rem);
}

.vcon-enrichment-heading { margin-bottom: clamp(16px, 2.1vw, 25px); }
.vcon-enrichment-heading h2 {
  max-width: 1120px;
  font-size: clamp(2.1rem, 3.7vw, 3.9rem);
}
.vcon-enrichment-heading > p:last-child { max-width: 960px; }

.vcon-json-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.56fr) minmax(290px, .74fr);
  gap: 16px;
  align-items: stretch;
}

.vcon-json-panel {
  min-width: 0;
  border: 1px solid rgba(173, 207, 224, .2);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(8, 22, 31, .97), rgba(4, 13, 20, .96));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.vcon-json-toolbar {
  min-height: 44px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .022);
}

.json-window-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.json-window-title i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--danger);
  opacity: .78;
}
.json-window-title i:nth-child(2) { background: var(--amber); }
.json-window-title i:nth-child(3) { background: var(--green); }
.json-window-title span {
  margin-left: 5px;
  overflow: hidden;
  color: var(--muted);
  font: .63rem var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vcon-json-toolbar b {
  padding: 5px 8px;
  border-radius: 7px;
  color: var(--cyan);
  background: var(--cyan-soft);
  font-size: .54rem;
  letter-spacing: .075em;
  white-space: nowrap;
}

.vcon-json-code {
  margin: 0;
  padding: 12px 0 14px;
  overflow: auto;
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 48px, transparent 48px),
    repeating-linear-gradient(180deg, transparent 0, transparent 19px, rgba(255,255,255,.012) 19px, rgba(255,255,255,.012) 20px);
  scrollbar-color: rgba(57, 210, 238, .35) transparent;
}
.vcon-json-code code {
  display: block;
  min-width: 760px;
  font-size: 0;
  line-height: 0;
  tab-size: 2;
}

.json-line {
  display: block;
  min-height: 1.34em;
  padding: 0 18px 0 15px;
  border-left: 3px solid transparent;
  font-size: clamp(.78rem, .9vw, .9rem);
  line-height: 1.34;
  white-space: pre;
  transition: opacity .16s ease, background-color .16s ease, filter .16s ease;
}
.json-line:hover { background-color: rgba(255,255,255,.04); }
.json-core {
  border-left-color: rgba(57, 210, 238, .62);
  background-color: rgba(57, 210, 238, .024);
}
.json-dialog {
  border-left-color: rgba(71, 215, 160, .62);
  background-color: rgba(71, 215, 160, .022);
}
.json-transcript {
  border-left-color: rgba(167, 139, 250, .68);
  background-color: rgba(167, 139, 250, .023);
}
.json-evaluation {
  border-left-color: rgba(245, 185, 94, .72);
  background-color: rgba(245, 185, 94, .024);
}
.json-skip {
  color: var(--muted-2);
  font-style: italic;
}

.vcon-json-layout[data-json-focus="core"] .json-line:not(.json-core):not(.json-neutral),
.vcon-json-layout[data-json-focus="dialog"] .json-line:not(.json-dialog):not(.json-neutral),
.vcon-json-layout[data-json-focus="transcript"] .json-line:not(.json-transcript):not(.json-neutral),
.vcon-json-layout[data-json-focus="evaluation"] .json-line:not(.json-evaluation):not(.json-neutral) {
  opacity: .36;
  filter: saturate(.75);
}
.vcon-json-layout[data-json-focus="core"] .json-core,
.vcon-json-layout[data-json-focus="dialog"] .json-dialog,
.vcon-json-layout[data-json-focus="transcript"] .json-transcript,
.vcon-json-layout[data-json-focus="evaluation"] .json-evaluation {
  background-color: rgba(255,255,255,.045);
}

.json-key { color: #70d8ef; }
.json-string { color: #b9e69d; }
.json-schema { color: #c9b7ff; }
.json-number { color: #f4be6d; }
.json-boolean { color: #ff8f9a; font-weight: 750; }
.json-punctuation { color: #8299a7; }
.json-ellipsis { color: #728793; font-style: italic; }

.vcon-json-inspector {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
}

.json-zoom-square {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid rgba(173, 207, 224, .24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 12%, rgba(57, 210, 238, .08), transparent 13rem),
    linear-gradient(145deg, rgba(12, 29, 40, .98), rgba(5, 15, 22, .98));
  box-shadow: 0 22px 70px rgba(0,0,0,.32);
  overflow: hidden;
}
.json-zoom-square::after {
  content: "MAGNIFIED SECTION";
  position: absolute;
  right: 11px;
  bottom: 9px;
  color: var(--muted-2);
  font: .49rem var(--mono);
  letter-spacing: .1em;
  pointer-events: none;
}

.json-zoom-view {
  position: absolute;
  inset: 0;
  display: none;
  padding: 20px 20px 24px;
  flex-direction: column;
  opacity: 0;
  transform: scale(.97);
}
.json-zoom-view.is-active {
  display: flex;
  opacity: 1;
  transform: none;
  animation: json-zoom-in .16s ease both;
}
@keyframes json-zoom-in {
  from { opacity: 0; transform: scale(.965) translateY(4px); }
  to { opacity: 1; transform: none; }
}
.zoom-kicker {
  color: var(--cyan);
  font-size: .57rem;
  font-weight: 850;
  letter-spacing: .11em;
}
[data-json-zoom-view="dialog"] .zoom-kicker { color: var(--green); }
[data-json-zoom-view="transcript"] .zoom-kicker { color: var(--violet); }
[data-json-zoom-view="evaluation"] .zoom-kicker { color: var(--amber); }
.json-zoom-view h3 {
  margin: 7px 0 12px;
  font-size: 1.02rem;
  letter-spacing: -.025em;
}
.json-zoom-view pre {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font: clamp(.78rem, .95vw, .9rem)/1.46 var(--mono);
  white-space: pre;
}
.json-review-trail { display: grid; gap: 10px; margin: 0; }
.json-review-trail > div { border-left: 2px solid var(--line-strong); padding-left: 10px; }
.json-review-trail > div:last-child { border-left-color: var(--amber); }
.json-review-trail dt { color: var(--muted); font-size: .68rem; line-height: 1.25; }
.json-review-trail dd { margin: 3px 0 0; font-size: .92rem; line-height: 1.3; }
.json-review-trail .json-review-supported { color: var(--green); }
.json-capture-trail { gap: 7px; }
.json-capture-trail dd { font-size: .81rem; }
.json-evaluation-trail > div:nth-child(1) { border-left-color: var(--violet); }
.json-evaluation-trail > div:nth-child(2) { border-left-color: var(--cyan); }
.json-evaluation-trail > div:nth-child(3) { border-left-color: var(--amber); }
.json-evaluation-trail dd { font-size: .82rem; }
.json-dialog-pointer { margin: 12px 0 0; color: var(--green); font-size: .72rem; line-height: 1.4; }

.json-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.json-focus-button {
  min-width: 0;
  min-height: 66px;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(10, 24, 34, .78);
  cursor: zoom-in;
  text-align: left;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.json-focus-button:hover,
.json-focus-button:focus-visible,
.json-focus-button.is-active {
  color: var(--text);
  border-color: rgba(57, 210, 238, .52);
  background: rgba(18, 39, 51, .94);
  transform: translateY(-1px);
}
.json-focus-button > span {
  grid-row: 1 / 3;
  color: var(--cyan);
  font: .6rem var(--mono);
}
.json-focus-button b {
  overflow: hidden;
  font-size: .69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.json-focus-button small {
  overflow: hidden;
  color: var(--muted-2);
  font-size: .54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialog-focus { border-left-color: var(--green); }
.dialog-focus > span { color: var(--green); }
.transcript-focus { border-left-color: var(--violet); }
.transcript-focus > span { color: var(--violet); }
.evaluation-focus { border-left-color: var(--amber); }
.evaluation-focus > span { color: var(--amber); }

.json-boundary-note {
  min-width: 0;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(42, 20, 27, .5), rgba(10, 24, 34, .78));
}
.json-boundary-note strong {
  margin-bottom: 6px;
  color: var(--danger);
  font-size: .66rem;
  letter-spacing: .04em;
}
.json-boundary-note p {
  margin: 0;
  color: var(--muted);
  font-size: .59rem;
  line-height: 1.42;
}
.json-boundary-note code { color: var(--text); font-size: .94em; }
.json-boundary-note nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin-top: auto;
  padding-top: 9px;
}
.json-boundary-note a {
  color: var(--muted);
  text-decoration: none;
  font-size: .57rem;
  font-weight: 750;
}
.json-boundary-note a:hover { color: var(--text); }
.json-boundary-note nav button { padding: 0; border: 0; background: transparent; color: var(--cyan); font: 750 .57rem var(--font); cursor: pointer; }
.json-boundary-note nav button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

body.presenting .vcon-enrichment-heading { margin-bottom: 15px; }
body.presenting .json-line { font-size: clamp(.82rem, .96vw, .96rem); }

@media (min-width: 1101px) and (max-height: 820px) {
  body.presenting .vcon-json-code { max-height: calc(100svh - 300px); }
  body.presenting .json-zoom-square { width: 280px; }
  body.presenting .json-zoom-view { padding: 16px 16px 22px; }
  body.presenting .json-zoom-view pre { font-size: .72rem; line-height: 1.35; }
  body.presenting .json-focus-button { min-height: 48px; padding: 7px 9px; }
  body.presenting .json-boundary-note { padding: 9px 11px; }
  body.presenting .json-boundary-note strong { margin-bottom: 4px; }
  body.presenting .json-boundary-note nav { padding-top: 7px; }
}

@media (max-width: 1100px) {
  .vcon-json-layout { grid-template-columns: 1fr; }
  .vcon-json-inspector {
    grid-template-columns: minmax(260px, .7fr) 1fr;
    grid-template-rows: auto auto;
  }
  .json-zoom-square { grid-row: 1 / 3; }
  .json-boundary-note { min-height: 120px; }
  body.presenting .vcon-enrichment-slide {
    align-items: flex-start;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

@media (max-width: 820px) {
  .vcon-enrichment-heading h2 { font-size: clamp(2rem, 9vw, 3.25rem); }
  .vcon-json-code code { min-width: 720px; }
  .json-line { font-size: .78rem; }
  .vcon-json-inspector { grid-template-columns: 1fr; }
  .json-zoom-square { grid-row: auto; width: min(100%, 370px); }
  .json-boundary-note { min-height: 0; }
}

@media (max-width: 560px) {
  .vcon-json-toolbar { align-items: flex-start; flex-direction: column; padding-block: 10px; }
  .vcon-json-toolbar b { white-space: normal; }
  .vcon-json-code code { min-width: 690px; }
  .json-line { font-size: .76rem; }
  .json-zoom-square { width: 100%; }
  .json-zoom-view { padding: 18px 17px 23px; }
  .json-zoom-view pre { font-size: .74rem; }
  .json-focus-button { min-height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .json-zoom-view.is-active { animation: none; }
}

@media print {
  .vcon-enrichment-heading { margin-bottom: .15in; }
  .vcon-json-layout { grid-template-columns: 1.55fr .75fr; gap: .14in; }
  .vcon-json-code code { min-width: 0; }
  .json-line { font-size: .105in; line-height: 1.28; }
  .json-zoom-square { width: 2.8in; }
  .json-focus-grid { display: none; }
  .json-boundary-note { padding: .09in .11in; }
}