/* ============================================================
   math.css — CSS-only equation typesetting.
   No KaTeX, no CDN, no build step. Works offline.

   The container is deliberately NOT a flex box: sub/sup rely on
   normal inline layout and vertical-align, which flex discards.
   Only the stacked constructs (fractions, big operators) are flex,
   and each sits in the line as a single inline-block.

   Vocabulary used inside data files:
     <span class="eq"> …                              equation
     <span class="fr"><i>num</i><b>den</b></span>     fraction
     <span class="sq">x</span>                        square root
     <sub> <sup>                                      native
     <span class="op">+</span>                        spaced operator
     <span class="op-eq">=</span>                     spaced equals
     <span class="big" data-lo="i=1" data-hi="n"><s>Σ</s></span>
     <span class="pl">(</span>                        tall delimiter
   ============================================================ */

.eq{
  font-family:var(--mono);
  font-size:15px;
  line-height:2.5;               /* headroom for stacked fractions */
  color:var(--ink);
  display:inline-block;
  white-space:normal;
}

/* --- sub / superscript: the whole reason the container stays inline --- */
.eq sub,
.eq sup{
  font-size:.62em;
  line-height:0;
  position:relative;
  vertical-align:baseline;
}
.eq sup{top:-.52em}
.eq sub{top:.26em}

/* --- operators get breathing room --- */
.eq .op{margin:0 .34em;color:var(--ink-2)}
.eq .op-eq{margin:0 .5em;color:var(--ink)}

/* --- fraction --- */
.fr{
  display:inline-block;
  vertical-align:middle;
  text-align:center;
  margin:0 .24em;
  font-size:.95em;
  line-height:1.35;
}
.fr > i,
.fr > b{
  display:block;
  font-style:normal;
  font-weight:inherit;
  padding:0 .4em;
  white-space:nowrap;
}
.fr > i{border-bottom:1.2px solid currentColor;padding-bottom:.1em}
.fr > b{padding-top:.1em}

/* --- radical: a leading √ plus an overline across the radicand --- */
.sq{
  display:inline-block;
  position:relative;
  padding:.12em .18em 0 .78em;
  margin:0 .1em;
  white-space:nowrap;
  line-height:1.35;
}
.sq::before{
  content:"\221A";
  position:absolute;
  left:0;
  top:.06em;
  font-size:1.06em;
}
.sq::after{
  content:"";
  position:absolute;
  left:.7em;right:0;top:.1em;
  border-top:1.2px solid currentColor;
}

/* --- big operators with limits (sum, product) --- */
.big{
  display:inline-block;
  vertical-align:middle;
  text-align:center;
  margin:0 .2em;
  line-height:1.1;
  font-size:.95em;
}
.big::before{
  content:attr(data-hi);
  display:block;
  font-size:.56em;
  color:var(--ink-2);
  min-height:1em;
}
.big::after{
  content:attr(data-lo);
  display:block;
  font-size:.56em;
  color:var(--ink-2);
  min-height:1em;
}
.big > s{
  display:block;
  text-decoration:none;
  font-size:1.45em;
  line-height:.9;
}

/* --- tall delimiters, for wrapping a fraction --- */
.pl{
  display:inline-block;
  transform:scaleY(2);
  transform-origin:center;
  margin:0 .16em;
  color:var(--ink-2);
}

/* --- size variants --- */
.eq--sm{font-size:13px}
.eq--lg{font-size:19px}

/* Cards clip a long equation to one scrolling line. */
.fcard-eq .eq{white-space:nowrap;line-height:2.3}