/**
 * Mathematical Notation Styles
 * Global styling for mathematical expressions across the entire site
 */

/* Superscript and subscript styling */
sup, sub {
    font-size: 0.7em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    font-weight: inherit;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Specific styling for different content areas */
.content sup, .content sub,
.question-text sup, .question-text sub,
.answer sup, .answer sub,
.card-content sup, .card-content sub,
.post-body sup, .post-body sub {
    font-size: 0.75em;
}

/* Fullscreen mode adjustments */
.fullscreen-mode sup, .fullscreen-mode sub {
    font-size: 0.7em;
}

/* Modal and popup adjustments */
.modal sup, .modal sub,
.popup sup, .popup sub {
    font-size: 0.8em;
}

/* Table cell adjustments */
td sup, td sub,
th sup, th sub {
    font-size: 0.75em;
}

/* List item adjustments */
li sup, li sub {
    font-size: 0.75em;
}

/* Ensure proper spacing around mathematical expressions */
.math-expression {
    white-space: nowrap;
}

.math-expression sup,
.math-expression sub {
    margin: 0 0.1em;
}

/* Square root styling */
.math-sqrt {
    position: relative;
    display: inline-block;
}

.math-sqrt::before {
    content: "√";
    position: absolute;
    left: -0.3em;
    top: 0;
    font-size: 1.2em;
}

.math-sqrt span {
    border-top: 1px solid currentColor;
    padding-top: 0.14em;
    margin-left: 0.2em;
}

/* Radicand under vinculum (from mathematical-notation.js √ + overline).
 * Use inline-block + tight line-height so the overline stays on the radicand, not the parent’s
 * tall line box (e.g. vault viewer .instructions-text at line-height: 1.8). */
.sqrt-radicand {
    display: inline-block;
    line-height: 1.2;
    vertical-align: 0.12em;
    padding-top: 0.1em;
    text-decoration: overline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0;
}

/* Stacked fractions (when user chooses “Stacked fractions” in the on-page toggle) */
.algebraic-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    vertical-align: middle;
    line-height: 1.2;
    margin: 0 0.15em;
    font-family: "Rockwell", "Rockwell Nova", "Roboto Slab", serif;
    font-size: 1.08em;
}
.algebraic-frac-num,
.algebraic-frac-den {
    text-align: center;
    padding-left: 0.2em;
    padding-right: 0.2em;
    white-space: nowrap;
}
.algebraic-frac-num {
    padding-bottom: 0.1em;
}
.algebraic-frac-den {
    padding-top: 0.1em;
}
.algebraic-frac-bar {
    flex: 0 0 auto;
    border-top: 0.09em solid currentColor;
    align-self: stretch;
}
.algebraic-frac sup,
.algebraic-frac sub {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.algebraic-frac sup { top: -0.35em; }
.algebraic-frac sub { bottom: -0.2em; }

/* Recurring decimal dots: position a dot centred above the digit.
 * We avoid U+0307 combining marks because their placement is font-dependent (often looks like an index). */
.mv-recur-dot {
    position: relative;
    display: inline-block;
    padding: 0 0.02em; /* tiny width so dot centres on narrow digits */
}
.mv-recur-dot::after {
    content: "·";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -0.62em;
    font-size: 0.95em;
    line-height: 1;
    font-weight: 700;
}

/* Compact floating preference (pages with mathematical-notation.js). Hide via body.no-fraction-notation-toggle */
.math-fraction-notation-toggle-host {
    position: fixed;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 9998;
    padding: 0.22rem 0.5rem;
    background: rgba(253, 253, 252, 0.97);
    border: 1px solid rgba(29, 29, 27, 0.14);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.06);
    font-size: 0.7rem;
    line-height: 1.25;
    color: #1d1d1b;
    letter-spacing: 0.01em;
    max-width: min(14rem, calc(100vw - 1rem));
    font-family: "Rockwell", "Rockwell Nova", "Roboto Slab", Georgia, serif;
}
.math-fraction-notation-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    cursor: pointer;
    margin: 0;
    font-weight: 600;
    user-select: none;
    color: inherit;
}
.math-fraction-notation-toggle-label input {
    margin: 0;
    flex-shrink: 0;
    width: 0.85rem;
    height: 0.85rem;
    accent-color: #c90c0f;
}
@media (max-width: 380px) {
    .math-fraction-notation-toggle-host {
        font-size: 0.66rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Mathematical symbols */
.math-symbol {
    font-style: italic;
}

/* Vector notation: arrow above letters (e.g. AB with → on top) */
.overrightarrow {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    white-space: nowrap;
}
.overrightarrow .vec-arrow {
    font-size: 0.75em;
    line-height: 0.9;
    margin-bottom: -0.05em;
}
.overrightarrow .vec-label {
    line-height: 1;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    sup, sub {
        font-size: 0.65em;
    }
    
    .content sup, .content sub,
    .question-text sup, .question-text sub,
    .answer sup, .answer sub {
        font-size: 0.7em;
    }
}

@media (max-width: 480px) {
    sup, sub {
        font-size: 0.6em;
    }
    
    .content sup, .content sub,
    .question-text sup, .question-text sub,
    .answer sup, .answer sub {
        font-size: 0.65em;
    }
}

/* Print styles */
@media print {
    .math-fraction-notation-toggle-host {
        display: none !important;
    }
    sup, sub {
        font-size: 0.7em;
        color: black !important;
    }
    
    .content sup, .content sub,
    .question-text sup, .question-text sub,
    .answer sup, .answer sub {
        font-size: 0.75em;
        color: black !important;
    }
}