/* ═══════════════════════════════════════════════════════════════════
   MTL CALLOUT — Article-integrated equation translation
   Replaces generic .equation-block overlays. Scoped to the article
   body so it respects the host page theme variables.
   ═══════════════════════════════════════════════════════════════════ */

.mtl-callout {
  --mtl-gold: #d4af37;
  --mtl-gold-dim: rgba(212, 175, 55, 0.12);
  --mtl-gold-faint: rgba(212, 175, 55, 0.06);
  --mtl-text: var(--text, var(--text-main, #e8e8e8));
  --mtl-muted: var(--text-secondary, #a0a0a0);
  --mtl-bg: var(--bg-light, #0f1114);
  --mtl-border: var(--border, rgba(212, 175, 55, 0.18));
  --mtl-radius: 0.4rem;

  max-width: 780px;
  margin: 2rem auto;
  background: var(--mtl-bg);
  border: 1px solid var(--mtl-border);
  border-left: 3px solid var(--mtl-gold);
  border-radius: 0 var(--mtl-radius) var(--mtl-radius) 0;
  overflow: hidden;
  font-family: var(--sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ── Header ── */
.mtl-callout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--mtl-gold-faint);
  border-bottom: 1px solid var(--mtl-border);
}

.mtl-callout__label {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mtl-gold);
}

.mtl-callout__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  background: transparent;
  border: 1px solid var(--mtl-border);
  border-radius: 999px;
  color: var(--mtl-muted);
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mtl-callout__toggle:hover,
.mtl-callout__toggle:focus-visible {
  color: var(--mtl-gold);
  border-color: var(--mtl-gold);
  background: var(--mtl-gold-faint);
  outline: none;
}

.mtl-callout__toggle[aria-expanded="true"] .mtl-callout__toggle-icon {
  transform: rotate(180deg);
}

.mtl-callout__toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 0.55rem;
}

/* ── Formula ── */
.mtl-callout__formula {
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 1.05rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.25) transparent;
}

.mtl-callout__formula::-webkit-scrollbar { height: 4px; }
.mtl-callout__formula::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.25);
  border-radius: 2px;
}

.mtl-callout__formula mjx-container,
.mtl-callout__formula .MathJax {
  font-size: 1em !important;
}

/* ── Translation panel ── */
.mtl-callout__panel {
  display: none;
  border-top: 1px solid var(--mtl-border);
  background: var(--mtl-gold-faint);
}

.mtl-callout__panel.open {
  display: block;
}

.mtl-callout__section {
  padding: 1rem 1.25rem;
}

.mtl-callout__section + .mtl-callout__section {
  border-top: 1px solid var(--mtl-border);
}

.mtl-callout__section h4 {
  margin: 0 0 0.6rem;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mtl-gold);
}

.mtl-callout__section p,
.mtl-callout__section dd,
.mtl-callout__section li {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--mtl-text);
}

.mtl-callout__section p:last-child,
.mtl-callout__section dd:last-child,
.mtl-callout__section li:last-child {
  margin-bottom: 0;
}

/* ── Mapping list ── */
.mtl-callout__mapping dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}

.mtl-callout__mapping dt {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  color: var(--mtl-gold);
  font-size: 0.85rem;
}

.mtl-callout__mapping dd {
  margin: 0;
  color: var(--mtl-muted);
  font-size: 0.88rem;
}

/* ── Derived claim / test condition ── */
.mtl-callout__claim {
  background: var(--mtl-gold-dim);
}

.mtl-callout__test {
  margin-top: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-left: 2px solid var(--mtl-gold);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 0 0.2rem 0.2rem 0;
  font-size: 0.85rem;
  color: var(--mtl-muted);
}

.mtl-callout__test strong {
  color: var(--mtl-gold);
}

/* ── Stale / review flag ── */
.mtl-callout__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.2rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  font-size: 0.78rem;
}

/* ── Variants ── */
.mtl-callout.is-master-equation {
  border-left-width: 4px;
}

.mtl-callout.is-open .mtl-callout__panel {
  display: block;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .mtl-callout { margin: 1.5rem auto; }
  .mtl-callout__header { flex-wrap: wrap; gap: 0.5rem; }
  .mtl-callout__label { font-size: 0.55rem; }
  .mtl-callout__formula { padding: 1rem 0.75rem; font-size: 0.95rem; }
  .mtl-callout__section { padding: 0.85rem 1rem; }
  .mtl-callout__section p,
  .mtl-callout__section dd,
  .mtl-callout__section li { font-size: 0.88rem; }
  .mtl-callout__mapping dl { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .mtl-callout__mapping dd { margin-bottom: 0.5rem; }
}