/* Shared AP fraction: "AP =" then Skilled Hours stacked over Direction Hours, then an optional result.
   Used by the landing page and the framework page for every AP calculation.
   Markup:
   <p class="ap-calc" role="img" aria-label="AP equals 12 Skilled Hours divided by 1 Direction Hour, which is 12 times">
     <span class="ap-lhs">AP =</span>
     <span class="ap-frac"><span class="ap-num ap-skilled">12 Skilled Hours</span><span class="ap-den ap-direction">1 Direction Hour</span></span>
     <span class="ap-rhs">= 12×</span>   (optional)
   </p>
   Add .ap-defined when the fraction shows the plain definitions instead of short names.
   "AP =" stays on the left and the definitions wrap inside the fraction. Size it with
   font-size on .ap-calc and --ap-def-size (default .5em) for the definition text.
   Everything scales in em. */
.ap-calc{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25em .4em;max-width:100%;margin:0;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.ap-calc .ap-lhs,.ap-calc .ap-rhs{white-space:nowrap}
.ap-calc .ap-frac{display:inline-flex;flex-direction:column;align-items:stretch;text-align:center;min-width:0}
.ap-calc .ap-num,.ap-calc .ap-den{display:block;padding:0 .15em}
.ap-calc .ap-num{padding-bottom:.14em}
.ap-calc .ap-den{padding-top:.14em;border-top:max(2px,.07em) solid currentColor}
.ap-calc .ap-note{display:block;font-size:.62em;font-weight:600;letter-spacing:0;opacity:.75;line-height:1.3}
.ap-calc .ap-skilled{color:var(--ap-skilled,inherit)}
.ap-calc .ap-direction{color:var(--ap-direction,inherit)}
.ap-calc .ap-den{border-top-color:var(--ap-line,currentColor)}
.ap-calc.ap-defined{flex-wrap:nowrap}
.ap-calc.ap-defined .ap-frac{flex:0 1 auto;max-width:15em}
.ap-calc.ap-defined .ap-num,.ap-calc.ap-defined .ap-den{font-size:var(--ap-def-size,.5em);letter-spacing:-.01em;line-height:1.25;text-wrap:balance}
.ap-calc.ap-defined .ap-num{padding-bottom:.3em}
.ap-calc.ap-defined .ap-den{padding-top:.3em;border-top-width:max(2px,.1em)}