/* OLS stacked fractions, step lines and ICE grids (Mo's orders 1-3, 6 Nov 2026).
   Used on revision pages (printed in the head) and inside H5P iframes (h5p_alter_library_styles).
   Markup:
   <span class="ols-mfrac" role="math" aria-label="a over b"><span class="ols-mfrac-x">(</span><span class="ols-mfrac-n">a</span><span class="ols-mfrac-x">) / (</span><span class="ols-mfrac-d">b</span><span class="ols-mfrac-x">)</span></span>
   The ols-mfrac-x pieces are hidden; they keep copied text and crawler text mathematically exact. */
.ols-mfrac {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  vertical-align: middle;
  text-align: center;
  margin: 0.2em 0.2em;
  line-height: 1.25;
  font-size: 0.94em;
  font-style: normal;
  max-width: 100%;
  /* contain the hidden .ols-mfrac-x pieces: without this they sit against an ancestor outside any
     overflow-x scroller (e.g. .ols-table-wrap) and widen the whole page at phone width (7 Nov 2026) */
  position: relative;
}
.ols-mfrac > .ols-mfrac-n,
.ols-mfrac > .ols-mfrac-d {
  display: block;
  padding: 0 0.3em;
  white-space: nowrap;
}
.ols-mfrac > .ols-mfrac-n { border-bottom: 0.09em solid currentColor; padding-bottom: 0.12em; }
.ols-mfrac > .ols-mfrac-d { padding-top: 0.12em; }
.ols-mfrac .ols-mfrac { font-size: 0.88em; margin: 0.04em 0.1em; }
.ols-mfrac > .ols-mfrac-x {
  position: absolute !important;
  top: 0; left: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
sup .ols-mfrac, .ols-mfrac-sup .ols-mfrac { font-size: 0.8em; }

/* Fraction look matches the Study Cards (H5P.StudyCard span.sc-frac). */

/* A line of working that holds a fraction gets a little air above and below. */
.ols-mline { margin: 0.35em 0; line-height: 1.9; }

/* Step lines for H5P answers (no ul/li allowed in most H5P fields). */
.ols-steps { margin: 0.3em 0 0; padding: 0; }
.ols-steps > .ols-step {
  padding-left: 1.15em;
  text-indent: -1.15em;
  margin: 0.28em 0;
  line-height: 1.75;
}
.ols-steps > .ols-step > * { text-indent: 0; }
/* a line that carries on an equation ("= 0.0476") has no dot of its own */
.ols-steps > .ols-step-cont::before { visibility: hidden; }
/* The dot is inline and middle-aligned, so it sits level with the first line even when that line
   holds a tall stacked fraction. */
.ols-steps > .ols-step::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0.38em;
  height: 0.38em;
  margin: 0 0.57em 0 0.2em;
  text-indent: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

/* Quantity symbols: K italic with an upright subscript (Kc, Kp, Ka ...), p italic in p(X). */
i.ols-k, em.ols-k, span.ols-k { font-style: italic; font-weight: inherit; font-family: inherit; }
i.ols-k + sub, em.ols-k + sub { font-style: normal; }
/* H5P fields allow no <sub>: the subscript is a span */
span.ols-sub { font-size: 0.75em; vertical-align: sub; line-height: 0; font-style: normal; }

/* A step that holds more than one idea: label on the left, one idea per line on the right. */
.ols-stepset {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.55em;
  align-items: baseline; /* "Step 3." sits on the first line's baseline, even beside a fraction */
  margin: 0.7em 0;
}
.ols-stepset > .ols-stepset-n { line-height: 1.75; white-space: nowrap; }
.ols-stepset > .ols-steps { margin: 0; }
.ols-stepset > .ols-steps > .ols-step:first-child { margin-top: 0; }
.ols-stepset > .ols-steps > .ols-step:last-child { margin-bottom: 0; }

/* Compact ICE grid (look = Study Cards table.sc-ice). Species are the column heads, rows are
   I / C / E, the unit sits once in the corner. Fits a 375 px phone: no sideways scrolling.
   Pages: <div class="ols-ice-box"><table class="ols-ice">...</table></div>
   H5P (no table tags): <div class="ols-ice"><div class="ols-ice-r ols-ice-h"><span>...</span></div>...</div> */
.ols-ice-box { margin: 0.6em 0 0.9em; max-width: 100%; overflow-x: auto; }
table.ols-ice, div.ols-ice {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: 0.9em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: inherit;
  border: 1px solid rgba(28, 36, 75, 0.16);
  border-radius: 0.6em;
  overflow: hidden;
  max-width: 100%;
  width: auto;
}
div.ols-ice { display: table; margin: 0.4em 0 0.6em; }
div.ols-ice > .ols-ice-r { display: table-row; }
div.ols-ice > .ols-ice-r > span { display: table-cell; vertical-align: middle; }
table.ols-ice th, table.ols-ice td, div.ols-ice > .ols-ice-r > span {
  padding: 0.32em 0.7em;
  text-align: center;
  vertical-align: middle;
  border: 0;
  background: none;
  overflow-wrap: normal;
  word-break: normal;
}
table.ols-ice thead th, div.ols-ice > .ols-ice-h > span {
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid rgba(28, 36, 75, 0.16);
  background: rgba(47, 99, 214, 0.06);
  color: inherit;
}
table.ols-ice thead th.ols-ice-unit, div.ols-ice > .ols-ice-h > span.ols-ice-unit {
  font-weight: 500;
  font-size: 0.85em;
  opacity: 0.8;
  text-align: left;
}
table.ols-ice tbody th, div.ols-ice > .ols-ice-r:not(.ols-ice-h) > span:first-child {
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}
table.ols-ice tbody th abbr { text-decoration: none; border: 0; cursor: help; }
table.ols-ice tbody th small, div.ols-ice small {
  display: block;
  font-size: 0.72em;
  font-weight: 500;
  opacity: 0.75;
  white-space: normal;
  max-width: 5.5em;
  line-height: 1.15;
}
table.ols-ice td { white-space: normal; }
table.ols-ice tbody tr + tr > *, div.ols-ice > .ols-ice-r + .ols-ice-r:not(.ols-ice-h) > span {
  border-top: 1px solid rgba(28, 36, 75, 0.1);
}
table.ols-ice tr.ols-ice-eq > *, div.ols-ice > .ols-ice-eq > span { background: rgba(57, 255, 20, 0.08); }
table.ols-ice tr.ols-ice-x > *, div.ols-ice > .ols-ice-x > span { background: rgba(47, 99, 214, 0.03); }
.ols-ice .ols-ice-res { white-space: nowrap; }
.ols-ice .ols-mfrac { margin: 0.1em 0; }
@media (max-width: 480px) {
  table.ols-ice, div.ols-ice { font-size: 0.8em; }
  table.ols-ice th, table.ols-ice td, div.ols-ice > .ols-ice-r > span { padding: 0.28em 0.36em; }
  table.ols-ice thead th.ols-ice-unit, div.ols-ice > .ols-ice-h > span.ols-ice-unit { white-space: normal; }
}