/* fraction.css */

/* Container for an inline fraction that auto‑expands */
.fraction {
    display: inline-grid;
    grid-template-rows: auto 1px auto;
    grid-template-columns: max-content;
    justify-items: center;
    vertical-align: middle;
    pointer-events: none;
}

/* Numerator styling */
.fraction .numerator {
    min-width: 30px;
    padding: 4px;
    border: 1px solid transparent;
    text-align: center;
    pointer-events: auto;
    white-space: nowrap;
    transition: border-color .15s ease-in-out;
}

/* Denominator styling — shifted down so it doesn’t cover the line */
.fraction .denominator {
    min-width: 30px;
    padding: 4px;
    border: 1px solid transparent;
    text-align: center;
    pointer-events: auto;
    white-space: nowrap;
    transition: border-color .15s ease-in-out;
    transform: translateY(4px);
    margin-bottom: 4px;
}

/* Highlight border when focused */
.fraction:focus-within .numerator,
.fraction:focus-within .denominator {
    border-color: #ccc;
}

/* Fraction line spans the full width */
.fraction .fraction-line {
    width: 100%;
    border-top: 1px solid black;
    margin: 2px 0;
}

/* Nested fraction scaling — 70% each level */
.fraction .fraction {
    font-size: 0.7em;
}
.fraction .fraction .fraction {
    font-size: 0.49em; /* 0.7 × 0.7 */
}
.fraction .fraction .fraction .fraction {
    font-size: 0.343em;
}

/* Main input styling */
.main-input-box {
    border: 1px solid #ccc;
    padding: 8px;
    min-height: 50px;
    outline: none;
    cursor: text;
}

/* Placeholder text when empty */
.main-input-box:empty:before {
    content: attr(placeholder);
    color: #aaa;
}