/* Stacked fraction inputs and rendered fractions. */
.fr-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.fr-operand { display: flex; align-items: center; gap: 8px; }
.fr-operand .fr-cap { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-align: center; }
/* !important: the kit's generic input rule is more specific and sets width: 100%. */
.tool-ui .fr-operand input { width: 76px !important; text-align: center; font-size: 1.15rem !important; font-weight: 700; padding: 8px 6px !important; }
.tool-ui .fr-operand .fr-whole { width: 60px !important; }
.fr-stack { display: grid; gap: 6px; justify-items: center; }
.fr-stack .fr-line { width: 100%; height: 3px; border-radius: 2px; background: var(--ink-2); }
.fr-ops button { min-width: 44px; font-size: 1.15rem; }
.fr-f { display: inline-grid; vertical-align: middle; text-align: center; line-height: 1.15; margin: 0 2px; }
.fr-f > span:first-child { border-bottom: 2px solid currentColor; padding: 0 3px 1px; }
.fr-f > span:last-child { padding: 1px 3px 0; }
.result-box .big .fr-f { font-size: 0.8em; }
.stat-value .fr-f { font-size: 0.8em; }
.fr-rep { text-decoration: overline; }
#fr-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; color: var(--ink-2); }
#fr-steps li { line-height: 1.9; }
#fr-steps .fr-f { font-size: 0.85em; }