/* v23.3 — Ενιαίο σύστημα μαθηματικών τύπων
   Πρότυπο: καθαρό διώροφο κλάσμα, όπως στην κάρτα πυκνότητας. */
.math-frac{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  vertical-align:-.30em;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  margin:0 .10em;
  min-width:1.15em;
  font-family:inherit;
  font-size:.88em;
  font-style:normal;
  font-weight:inherit;
}
.math-frac>span{
  display:block;
  padding-inline:.18em;
  line-height:1.04;
}
.math-frac>span:first-child{
  padding-bottom:.09em;
  border-bottom:1.35px solid currentColor;
}
.math-frac>span:last-child{padding-top:.09em}
.math-frac.numeric-frac{font-variant-numeric:tabular-nums lining-nums}
.math-frac.unit-frac{font-size:.80em;vertical-align:-.28em}

/* Στους μεγάλους τίτλους το κλάσμα πρέπει να μένει συμπαγές και όχι να
   κληρονομεί ολόκληρο το μέγεθος της επικεφαλίδας. */
h1 .math-frac,h2 .math-frac,h3 .math-frac,
.lesson-hero h1 .math-frac,.reading-content h2 .math-frac{
  font-size:.60em;
  vertical-align:-.27em;
  margin-inline:.13em;
}
h1 .math-frac.unit-frac,h2 .math-frac.unit-frac,h3 .math-frac.unit-frac{font-size:.54em}
.reading-content h2:has(.math-frac),.lesson-content h2:has(.math-frac){line-height:1.18}

/* Μικρές ετικέτες και γραμμές τύπων. */
.reading-audience .math-frac,.eyebrow .math-frac,.reading-kicker .math-frac{
  font-size:.72em;
  vertical-align:-.25em;
}
.formula .math-frac,.formula-card .math-frac,.mm-inline-equation .math-frac,
.mm-solution .math-frac,.worked-math .math-frac,.equation .math-frac{
  font-size:.86em;
  vertical-align:-.29em;
}

/* Οι σειρές «Σχέση / Αντικατάσταση» χρειάζονται περισσότερο χώρο στην
   πρώτη στήλη και κατακόρυφη στοίχιση όταν περιέχουν διώροφα κλάσματα. */
@media (min-width:761px){
  .mm-solution>div{
    grid-template-columns:minmax(165px,185px) minmax(0,1fr);
    column-gap:30px;
    row-gap:8px;
    align-items:center;
  }
  .mm-solution>div>b{
    display:block;
    white-space:nowrap;
    padding-right:8px;
  }
}
.mm-solution>div>p{
  min-width:0;
  min-height:2.15em;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.08em;
  line-height:1.35;
}

/* Προστασία από κοψίματα και άβολες μετατοπίσεις σε κινητά. */
@media (max-width:760px){
  .math-frac{font-size:.84em;margin-inline:.08em}
  h1 .math-frac,h2 .math-frac,h3 .math-frac,
  .lesson-hero h1 .math-frac,.reading-content h2 .math-frac{
    font-size:.62em;
  }
  .mm-solution>div>p{min-height:auto;padding-top:.15em}
}

svg .svg-frac-line{stroke:currentColor;stroke-width:1.8}


/* Κεντρικές κάρτες τύπων: ίδιο οπτικό πρότυπο σε όλο το site. */
.mm-density-card .mm-fraction,
.mm-speed-card .mm-fraction,
.pressure-definition .fraction{
  display:inline-grid;
  grid-template-rows:auto auto;
  align-items:center;
  justify-items:stretch;
  min-width:1.35em;
  text-align:center;
  line-height:1;
}
.mm-density-card .mm-fraction>b,
.mm-speed-card .mm-fraction>b,
.pressure-definition .fraction>b{
  display:block;
  padding:.08em .34em;
  line-height:1.05;
}
.mm-density-card .mm-fraction>b:first-child,
.mm-speed-card .mm-fraction>b:first-child,
.pressure-definition .fraction>b:first-child{
  border-bottom:2px solid currentColor;
}

/* Οι ετικέτες των λυμένων παραδειγμάτων δεν ακουμπούν ποτέ στους τύπους. */
.mm-solution>div>b + p{margin-left:0}
.mm-solution>div>p{padding-block:.16em}

/* Ασφαλής συμπεριφορά σε μικρότερες οθόνες. */
@media (max-width:760px){
  .mm-solution>div{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .mm-solution>div>b{padding-right:0}
}

/* v23.5 — Κλάσματα φυσικών μεγεθών με τις μονάδες μέσα στον ίδιο αριθμητή
   και παρονομαστή. Παράδειγμα: (180 g)/(60 cm³), όχι (180/60)·(g/cm³). */
.math-frac.quantity-frac{
  min-width:3.3em;
  font-size:.92em;
  vertical-align:-.34em;
  margin-inline:.14em;
  font-variant-numeric:tabular-nums lining-nums;
}
.math-frac.quantity-frac>span{
  padding-inline:.38em;
  white-space:nowrap;
}
.mm-solution>div>p .math-frac.quantity-frac{
  font-size:.96em;
}
.mm-solution>strong .math-frac.unit-frac{
  font-size:.72em;
  vertical-align:-.30em;
  margin-left:.18em;
}
@media(max-width:760px){
  .math-frac.quantity-frac{font-size:.88em;min-width:3em}
  .mm-solution>div>p .math-frac.quantity-frac{font-size:.90em}
}