/* ── Overview Diagram ── */
.overview-diagram {
  --od-text: #ffffff;
  --od-text-sub: #94a3b8;
  --od-text-body: #cbd5e1;
  --od-card-bg: #1e293b;
  --od-rollout-bg: #1c1917;
  --od-training-bg: #022c22;
  --od-arrow: #94a3b8;

  /* accent colors (same in both themes) */
  --od-blue: #3b82f6;
  --od-amber: #f59e0b;
  --od-orange: #ea580c;
  --od-emerald: #10b981;
  --od-purple: #8b5cf6;
  --od-teal: #14b8a6;

  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  max-width: 1100px;
  aspect-ratio: 960 / 540;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* ── Light theme overrides ── */
[data-theme="light"] .overview-diagram {
  --od-text: #0f172a;
  --od-text-sub: #64748b;
  --od-text-body: #475569;
  --od-card-bg: transparent;
  --od-rollout-bg: #fdf8f3;
  --od-training-bg: #e9f8ef;
  --od-arrow: #64748b;
}

/* ── Title area ── */
.od-title {
  text-align: left;
  padding: 1.2% 4% 0;
  flex-shrink: 0;
}

.od-title h2 {
  color: var(--od-text);
  font-family: 'Fira Sans', sans-serif !important;
  font-size: clamp(18px, 3.2vw, 30px);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}

.od-title p {
  color: var(--od-text-sub);
  font-size: clamp(11px, 1.4vw, 14px);
  margin: 0.3% 0 0;
  font-style: italic;
}

/* ── Top row: Env + Arrows + ADK ── */
.od-top-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2.5% 4% 0;
  flex: 0 0 auto;
}

/* ── Component cards ── */
a.od-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  outline: none;
}

a.od-card:focus,
a.od-card:active {
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.od-card {
  background: var(--od-card-bg);
  border: 2px solid currentColor;
  border-left: 10px solid currentColor;
  border-radius: 0;
  padding: 1% 3% 1.5% 2%;
  position: relative;
  flex: 1;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.od-card:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* Card accent colors */
.od-card--env { background: var(--od-card-bg); border-color: var(--od-blue); }
[data-theme="light"] .od-card--env { background: #eef3fe; }

.od-card--adk { background: var(--od-card-bg); border-color: var(--od-amber); }
[data-theme="light"] .od-card--adk { background: #fef6e8; }

.od-card--inference { border-color: var(--od-purple); }
[data-theme="light"] .od-card--inference { background: #f3effe; }

.od-card--training { border-color: var(--od-teal); }
[data-theme="light"] .od-card--training { background: #e8f8f5; }

.od-card__header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5%;
}

.od-card__icon {
  font-size: clamp(18px, 3vw, 32px);
  flex-shrink: 0;
  width: clamp(25px, 4.2vw, 45px);
  text-align: center;
}

.od-card--env .od-card__icon { color: var(--od-blue); }
.od-card--adk .od-card__icon { color: var(--od-amber); }
.od-card--inference .od-card__icon { color: var(--od-purple); }
.od-card--training .od-card__icon { color: var(--od-teal); }

.od-card__title {
  font-family: 'Fira Sans', sans-serif;
  font-size: clamp(12px, 2vw, 19px);
  font-weight: 500;
  white-space: nowrap;
}

.od-card--env .od-card__title { color: var(--od-blue); }
.od-card--adk .od-card__title { color: var(--od-amber); }
.od-card--inference .od-card__title { color: var(--od-purple); }
.od-card--training .od-card__title { color: var(--od-teal); }

.od-card__body {
  color: var(--od-text-body);
  font-size: clamp(10px, 1.4vw, 14px);
  line-height: 1.5;
  margin: 0;
  padding-left: calc(clamp(25px, 4.2vw, 45px) + 0.5em); /* icon width + gap, aligns with title */
}

.od-card__body li {
  list-style: none;
  padding-left: 0;
}

.od-card__body li::before {
  content: none;
}

/* ── Bidirectional arrows between Env and ADK ── */
.od-mid-arrows {
  flex: 0 0 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 4vw, 30px);
  padding: 2% 0;
}

.od-mid-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.od-mid-arrow__label {
  color: var(--od-arrow);
  font-size: clamp(9px, 1.4vw, 14px);
  white-space: nowrap;
  text-align: center;
}

.od-mid-arrow__line {
  width: 80%;
  height: 1.5px;
  background: var(--od-arrow);
  position: relative;
  overflow: visible;
}

/* Right arrow (observations, reward) */
.od-mid-arrow--right .od-mid-arrow__line::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left: 7px solid var(--od-arrow);
}

/* Left arrow (actions) */
.od-mid-arrow--left .od-mid-arrow__line::after {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right: 7px solid var(--od-arrow);
}

/* ── Vertical connector arrows ── */
.od-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1% 4%;
  flex-shrink: 0;
}

.od-connector--split {
  justify-content: space-between;
  padding: 1% 21.5%;
}

.od-varrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

.od-varrow__line {
  width: 1.5px;
  height: clamp(14px, 3vh, 28px);
  background: var(--od-arrow);
}

.od-varrow__head {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--od-arrow);
}

.od-varrow__label {
  color: var(--od-arrow);
  font-size: clamp(9px, 1.4vw, 14px);
  font-style: normal;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 6px;
  white-space: nowrap;
}

/* ── Rollout band ── */
.od-rollout {
  background: var(--od-rollout-bg);
  border: 2.5px dashed var(--od-orange);
  border-radius: 0;
  margin: 0 4%;
  padding: 1% 2%;
  text-align: left;
  flex-shrink: 0;
}

.od-rollout__title span {
  font-family: 'Fira Sans', sans-serif;
  color: var(--od-orange);
  font-size: clamp(12px, 2vw, 19px);
  font-weight: 500;
  margin: 0;
}

.od-rollout__body {
  color: var(--od-text-body);
  font-size: clamp(11px, 1.15vw, 14px);
  margin: 0.5% 0 0;
}

/* ── Training section ── */
.od-training {
  background: var(--od-training-bg);
  border: 2.5px solid var(--od-emerald);
  border-radius: 0;
  margin: 0 4%;
  padding: 1% 2% 1.5%;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.od-training__title {
  text-align: left;
  margin: 0 0 1%;
}

.od-training__title span {
  font-family: 'Fira Sans', sans-serif;
  color: var(--od-emerald);
  font-size: clamp(12px, 2vw, 19px);
  font-weight: 500;
}

.od-training__title em {
  color: var(--od-text-sub);
  font-size: clamp(9px, 1.4vw, 14px);
  font-style: italic;
}

.od-training__cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 0 3%;
}

.od-training__cards .od-card {
  flex: 0 1 300px;
}


/* Horizontal arrow between training sub-cards */
.od-harrow {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 12px;
}

.od-harrow__line {
  width: clamp(20px, 4vw, 48px);
  height: 1.5px;
  background: var(--od-arrow);
  position: relative;
  overflow: visible;
}

.od-harrow__line::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left: 7px solid var(--od-arrow);
}