@charset "UTF-8";

/* ==========================
   Base Math Styling
   ========================== */
    
.math {
  font-family: "Times New Roman", "STIX Two Math", serif;
  font-size: 1em;
  line-height: 1.2;
  margin: 1em 0;  /* adds vertical space above and below each equation */
}

.math-frac {
  display: inline-block;
  vertical-align: middle;
}

.math-minus {
  position: relative;
  top: 0.164em;   /* raise, or: top: 0.1em;  lower*/
}
  
sup { 
  position: relative; 
  top: -0.6em; 
}

.math sup.sup-low { 
  font-size: 0.7em;
  top: -0.4em;   /* lower */
  left: -0.5em;
  vertical-align: baseline;
}
 
sup .math-frac { 
  font-size: 0.6em; 
  line-height: 1; 
  vertical-align: top; 
}

.math-var {
  font-style: italic;
}

.math-num {
  font-style: normal;
  display: inline;   /* important: don't let it become block */
}


/* Operators */
.math-op {
  font-style: normal;
  padding: 0 0.1em;
  font-size: 1.3em;   /* ← make · bigger */
}

/* Overall math line */
.math-display {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: "Times New Roman", "STIX Two Math", serif;
  font-size: 1em;
}

/* Subscripts */
.math-display sub {
  font-size: 0.75em;
  vertical-align: sub;
  line-height: 1;
  position: relative;
  top: 0.1em;
}

.cell.var { /* the color under this class is light, to solve this problem, this is added */
  color: inherit;
}


/* ==========================
   Subscripts & Superscripts
   ========================== */

.math sup {
  font-size: 0.7em;
  position: relative;
  top: -0.8em;     /* vertical raise */
  left: -0.01em;    /* pull exponent closer to the base */
  line-height: 1;
}

/* ==========================
   Fractions
   ========================== */
.math-frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.math-frac .num {
  display: block;
  padding-bottom: 0.05em;
}

.math-frac .den {
  display: block;
  border-top: 1px solid currentColor;
  margin-top: 0.15em;
  padding-top: 0.15em;
}

/* Fraction wrapper for vertical alignment with conditions */
.math-frac-wrapper {
  display: inline-block;
  vertical-align: center; /* aligns condition with fraction bar */
  margin-right: 0.2em;
}

/* ==========================
   Cube Root
   ========================== */
.root {
  position: relative;
  margin-left: -0.15em;  /* adjust value as needed */
}
 
.math-root {
  display: inline-flex;
  align-items: flex-start; /* align radical & root index to top */
  font-size: 1.2em;
  position: relative;
}


.math-root, 
.math-sqrt {
  display: inline-flex;
  align-items: flex-start;   /* aligns the radicand to the top of the √ symbol */
}

.math-root .root-index {
  font-size: 0.6em; /* smaller than the main radical */
  vertical-align: top;
  position: relative;
  top: 0.18em; /* adjust this to raise the 3 above the radical */
  left: 1.72em; /* adjust this to shift left a bit */
  line-height: 1;
}

.math-sqrt .radical {
  position: relative;
  font-size: 1.55em;
  top: -0.01em;    /* positive = move DOWN */
  left: 0.05em;  /* optional: nudges √ closer to bar */
}

.math-root .radical {
  font-size: 1.45em;
  position: relative;
  top: 0.22em;   /* positive = move DOWN */
  left: 0.12em;   /* push √ into bar */
}


.math-sqrt .radicand {
  display: inline-block;
  border-top: 1px solid currentColor;
  /* Increase space between √ and radicand */
  margin-left: 0.10em;   /* increase this from 0.05em to more */
  padding-top: 0.05em;   /* optional: nudges √ closer to bar */
}

.math-root .radicand {
  display: inline-block;
  border-top: 1px solid currentColor;
  padding-left: 0.20em; /* keeps text away from the bar */
  margin-left: -0.10em;  /* pulls the bar left */
}

/* ========= 
   Matrices 
  ========== */


.math-matrix {
  position: relative;
  display: inline-grid;
  grid-auto-flow: row;
  row-gap: 0.25em;
  column-gap: 0.8em;
  padding: 0.4em 0.8em; /* space so brackets don't overlap numbers */
}

/* Column vector: 1 column, 3 rows */
.matrix-col {
  grid-template-columns: auto;
}

/* 3×3 numeric matrix */
.matrix-3x3 {
  grid-template-columns: auto auto auto;
}

/* Cells */
.math-matrix .cell {
  white-space: nowrap;
  text-align: right; /* good for numbers; variables still fine */
}

/* Square brackets: left */
.math-matrix::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;

  width: 0.3em;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

/* Square brackets: right */
.math-matrix::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.1em;
  bottom: 0.1em;

  width: 0.3em;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}


/* ==========================
   Piecewise
   ========================== */
.math-piecewise {
  display: inline-flex;      /* keep brace and cases inline */
  align-items: stretch;      /* stretch brace to match cases height */
  margin-left: 0.02em;
}

.math-piecewise-wrapper {
  display: inline-block; /* keeps everything inline with fₓ = */
  font-size: 1.2em;
  vertical-align: middle;
  margin: 1em 0;
}

.math-piecewise-wrapper.force-block { 
  display: block; 
  width: 100%;
}

.math-piecewise .brace {
  display: inline-block;       
  margin-right: -0.22em;
  font-size: 3.25em;           /* slightly bigger to cover fraction */
  line-height: 1;
  transform: scaleX(0.32);     /* thin */
  transform-origin: left top;
}

.piecewise-cieXYZ .brace {
  position: relative; 
  top: 0.1em; /* or whatever offset you tuned */ 
  transform: scaleX(0.32) scaleY(1.25); /* increase Y scale */
  transform-origin: left top;
}

.math-piecewise .brace::before {
  content: "{";
  display: block;
}

.math-piecewise .brace div {
  flex: 1;
  border-left: 2px solid currentColor; /* vertical line for brace */
}

.cases {
  text-align: center;
  justify-items: center;   /* centers content inside each grid cell */
  align-items: center;     /* vertical centering (optional but nice) */
}

.math-piecewise .cases {
  display: grid;
  grid-template-columns: auto auto;	/* expr | cond */
  row-gap: 0.3em;
  column-gap: 1em;
  align-items: center;				/* vertically center each row */
}

.brace-gamma {
    position: relative;
    top: 0.1em;						/* move brace down */
}

.cases-gamma {
    margin-top: 0.8em;				/* move cases down */
}


.math-piecewise .case {
  display: flex;
  align-items: center;				/* vertical-align expressions and conditions */
  margin-bottom: 0.3em;
}

.math-piecewise .expr {
  display: inline-block;
  vertical-align: middle;
}

.math-piecewise .cond {
  display: inline-block;
  vertical-align: middle;
  padding-top: 0.15em;
  font-style: normal;
}

.piecewise-cieXYZ .cases {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  text-align: center;
}

.piecewise-cieXYZ .math-root {
  position: relative;
  left: -0.55em;   /* adjust until visually centered */
}