@charset "UTF-8";

/* Font performance optimization - allow fallback display while loading */
@font-face {
  font-family: 'MJX-NCM';
  font-display: swap;
}

/* Anti-CLS: Reserve space before MathJax renders */
.MathJax { padding: 4px 0 !important; display: inline-block !important; margin: 0 !important; cursor: pointer; contain: style; }
body.notouch .content .MathJax:not(.red_carpet_v4):hover { outline: 1px dashed grey; outline-offset: 2px; border-radius: 5px; }

/* Anti-CLS: Smooth fade-in when MathJax renders (GPU-accelerated) */
.MathJax {
  animation: mathjax-fadein 0.15s ease-in;
}

/* Disable fade-in for live equation previews while editing */
#tex_preview .MathJax,
#tex_preview_buffer .MathJax,
#output .MathJax {
  animation: none;
}
@keyframes mathjax-fadein {
  from { opacity: 0; transform: translateZ(0); }
  to { opacity: 1; transform: translateZ(0); }
}

/* Skeleton shimmer animation for unrendered formulas */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Anti-CLS: Reserve minimum space for unrendered formulas */
span.raw_tex3 {
  vertical-align: baseline;
  /* After render, keep inline flow (inline-block here breaks post formatting) */
  display: inline;
}

/* Promote pending formulas to GPU layer for smoother transition */
span.raw_tex3.tex3_pending {
  will-change: contents;
}

/* Anti-CLS: Prevent layout shift during loading */
span.raw_tex3:not(:has(.MathJax)) {
  display: inline-block;
  /* Keep placeholder height aligned with final MathJax box (2px top + 2px bottom). */
  min-height: calc(var(--tex-height, 1.2em) + 4px);
  position: relative;

  /* Lazy rendering: skip formulas outside viewport */
  content-visibility: auto;
  /* Reserve approximate size when not rendered (prevents CLS on scroll position restore) */
  contain-intrinsic-size: clamp(2em, calc(1ch * var(--tex-length, 10)), 20em) calc(var(--tex-height, 1.2em) + 4px);

  /* Skeleton placeholder visual */
  color: transparent;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;

  /* Reserve approximate space based on content length */
  min-width: clamp(2em, calc(1ch * var(--tex-length, 10)), 20em);
}

mjx-merror { font-size: 1.4em; }
span.raw_tex3.erro_mat:not(:has(.MathJax)) { background: #ffff88; animation: none; outline: 1px solid #cc0000; color: #cc0000; padding: 1px 3px; position: relative; }
span.raw_tex3:has(.tex3_unrendered_error):not(:has(.MathJax)) { background: #ffff88; animation: none; outline: 1px solid #cc0000; color: #cc0000; padding: 1px 3px; position: relative; }
span.tex3_unrendered_error { background-color: #ffff88; outline: 2px solid #cc0000; color: #cc0000; padding: 1px 3px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Em estado de erro, desativa a reserva de espaço do placeholder para não inflar a altura da caixa */
span.raw_tex3.erro_mat:not(:has(.MathJax)),
span.raw_tex3:has(.tex3_unrendered_error):not(:has(.MathJax)) {
  min-height: 0;
  min-width: 0;
  content-visibility: visible;
  contain-intrinsic-size: auto;
  background-size: initial;
}
/* Evita "erro duplo": quando o wrapper já está marcado como erro, o span interno não deve desenhar outra caixa */
span.raw_tex3.erro_mat > span.tex3_unrendered_error {
  background: transparent;
  outline: 0;
  padding: 0;
  border-radius: 0;
}
/* O tema global usa [tooltip]::before/::after; em erro TeX não queremos badge. */
span.raw_tex3.erro_mat[tooltip]::before,
span.raw_tex3.erro_mat[tooltip]::after,
span.raw_tex3:has(.tex3_unrendered_error)[tooltip]::before,
span.raw_tex3:has(.tex3_unrendered_error)[tooltip]::after {
  display: none !important;
  content: none !important;
}
.tex_popup { display: none; margin: 0 !important; border: 2px solid grey !important; background-color: #fff !important; position: absolute; border-radius: 5px; text-align: left; z-index: 1; }
.red_carpet_v4 { background-color: #f2f2f2; position: relative !important; z-index: 2; }
.red_carpet_v4:before { content:""; position:absolute; border: 1px solid #f2f2f2; inset: -2px -5px -2px -5px; border-width: 2px 5px 2px 5px; z-index: 3; }
.red_carpet_v4:after { content:""; position:absolute; inset: -4px -7px 0 -7px; border: 2px solid grey; border-bottom-width: 0; border-top-right-radius: 5px; border-top-left-radius: 5px; z-index: 4; }
dt.eqn_faixa { background-color: #f2f2f2; font-size: .9em; margin: 0; padding-left: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
span.tex3_warning { float: right; font-size: .8em; padding-right: 5px; }
.tex_popup code.tex2jax_ignore { white-space: pre-wrap; }
.tex_popup code.tex2jax_ignore.compact_tex { white-space: normal; }
/* Remove focus outline from MathJax output */
.MathJax:focus { outline: none; }

/* Increase interline spacing for MathJax CHTML multiline layouts */
mjx-linestrut:first-child {
  height: calc(1em + 16px);
}
