/* Shared visual language for the three-part External ID series. */
.post-body .eeid-diagram {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto 2rem;
  border: 1px solid #244847;
  border-radius: 12px;
  background: #0d2222;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
}

.post-body .eeid-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

.post-body .eeid-visual-card {
  position: relative;
  min-width: 0;
  padding: 18px 18px 17px;
  border: 1px solid #24504e;
  border-radius: 10px;
  background: linear-gradient(145deg, #153333, #102626 72%);
  color: #d9ebe7;
}

.post-body .eeid-visual-card::before {
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 13px;
  border-radius: 4px;
  background: #48d9c4;
  content: "";
}

.post-body .eeid-visual-card strong {
  display: block;
  margin-bottom: 7px;
  color: #f0f7f4;
}

.post-body .eeid-visual-card p {
  margin: 0;
  color: #a9c9c2;
  font-size: .94em;
}

.post-body .eeid-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  margin: 1rem 0 1.75rem;
  counter-reset: eeid-step;
}

.post-body .eeid-step {
  position: relative;
  min-width: 0;
  padding: 17px 16px 16px 54px;
  border: 1px solid #24504e;
  border-radius: 9px;
  background: #112929;
  color: #d9ebe7;
  counter-increment: eeid-step;
}

.post-body .eeid-step::before {
  position: absolute;
  top: 16px;
  left: 15px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #e6c94f;
  border-radius: 50%;
  background: rgba(230, 201, 79, .13);
  color: #f2d95c;
  content: counter(eeid-step, decimal-leading-zero);
  font: 700 .78rem/1 "JetBrains Mono", monospace;
}

.post-body .eeid-step strong { color: #f0f7f4; }
.post-body .eeid-step p { margin: 6px 0 0; color: #a9c9c2; font-size: .92em; }

.post-body mark.eeid-buzzword {
  padding: .08em .28em;
  border: 1px solid rgba(238, 207, 70, .65);
  border-radius: 3px;
  background: rgba(238, 207, 70, .2);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #ffe678;
  font-weight: 600;
}

html[data-theme="light"] .post-body .eeid-visual-card,
html[data-theme="light"] .post-body .eeid-step {
  border-color: #d5bd54;
  background: linear-gradient(145deg, #fff9d9, #fffdf2);
  color: #253534;
}
html[data-theme="light"] .post-body .eeid-visual-card strong,
html[data-theme="light"] .post-body .eeid-step strong { color: #173b39; }
html[data-theme="light"] .post-body .eeid-visual-card p,
html[data-theme="light"] .post-body .eeid-step p { color: #526c67; }
html[data-theme="light"] .post-body mark.eeid-buzzword {
  background: #ffec85;
  color: #493d08;
}

@media (max-width: 600px) {
  .post-body .eeid-visual-grid,
  .post-body .eeid-step-grid { grid-template-columns: 1fr; }
  .post-body .eeid-diagram { margin-block: 1rem 1.5rem; border-radius: 8px; }
}