/* Chemistry module stylesheet (plan 08: per-module CSS).
 * Holds the calculator-specific rules extracted from inline <style> blocks in
 * the Chemistry module views. Loaded only on the pages that need it via the
 * layout's @stack('module-css') + each view's @push('module-css').
 *
 * Rules left INLINE on purpose (not moved here):
 *  - theoretical-yield-calculator's `.calculator-box` media-query rule and
 *    stoichiometry-calculator's `.calculator-box` mobile-only rule: same
 *    class, two DIFFERENT rule bodies. Both views load this shared
 *    stylesheet, so merging either version here would leak into the other
 *    calculator's page. Stays inline in both views.
 *  - stoichiometry-calculator's `#exampleLoadBtn` and `.calculator-box`
 *    (mobile) blocks are wrapped in `@isset($detail)` / device checks —
 *    conditional on runtime state, so they can't become static CSS without
 *    changing when the rule applies.
 *  - stoichiometry-calculator's `.katex-display>.katex, .katex .katex-html`
 *    rule targets the third-party KaTeX library's own generic classes.
 *    empirical-formula-calculator also renders KaTeX and also loads this
 *    stylesheet; making that rule global here would silently re-style
 *    empirical-formula-calculator's KaTeX output too. Stays inline in
 *    stoichiometry-calculator.
 */

/* theoretical-yield-calculator — inline-editable result unit select */
#onetw {
    background: transparent;
    border: none;
    color: #1670a7;
    outline: none;
    width: auto;
    min-width: fit-content;
}

/* mole-ratio-calculator — step toggles, hidden until their step is active */
.whole, .whole_two, .moles_one, .moles_two, #btn22, #btn42, #btn6, #btn7, .whole_three, .whole_fourth {
    display: none;
}

/* ppm-calculator — tab panel offset */
.pacetabs {
    left: 20.7%;
}
@media (max-width: 991px) {
    .pacetabs {
        left: 0;
    }
}

/* empirical-formula-calculator — result input + loading spinner overlay */
@media (max-width: 450px) {
    .input {
        font-size: 12px;
    }
    #loading {
        top: 50% !important;
        left: 40% !important;
    }
    .loader-text {
        top: 35% !important;
        left: 28% !important;
    }
}
.input-unit {
    position: absolute;
    right: 6px;
    top: 14px;
    font-size: 12px;
}
.input {
    font-size: 14px;
    padding-left: 5px;
}
#loading {
    position: absolute;
    top: 50%;
    left: 46%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 70px;
    height: 70px;
    border: 10px solid #b1cff1;
    border-radius: 50%;
    border-top: 10px solid #036bd3;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s;
}
@-webkit-keyframes animatebottom {
    from { bottom: -100px; opacity: 0; }
    to { bottom: 0px; opacity: 1; }
}
@keyframes animatebottom {
    from { bottom: -100px; opacity: 0; }
    to { bottom: 0; opacity: 1; }
}
#myTable {
    visibility: hidden;
}
.loader-text {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
    position: absolute;
    top: 36%;
    left: 39%;
}
div:has(.input-unit) > .input {
    padding-right: 0px !important;
}

/* Shared table-toggle styling — used identically by
 * chemical-equation-balancer-calculator, limiting-reactant-calculator and
 * redox-reaction-calculator (verified byte-identical before merging). */
.t_set tr {
    border-color: transparent;
}
.t_set tr td:hover {
    cursor: pointer;
}
.t_set .btn-small {
    display: table-cell;
}
.bt_set {
    background: #1670a7;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 0 16px;
    font-size: 13px;
    min-height: 32.4px;
    border: none;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
}
.check {
    padding: 5px;
}

/* Shared reaction-table row colours — used identically by
 * limiting-reactant-calculator and redox-reaction-calculator. */
.t1 { background: #F4CDCD; }
.t2 { background: #ACDFEC; }
.t3 { background: #85E185; }
.t4 { background: #EACE5D; }
.t5 { background: #F1F165; }
.t6 { background: #E5BDE5; }
.t7 { background: #F6D4A2; }
.t8 { background: #FACCDB; }
.t9 { background: #9EE5D4; }
.t10 { background: #E9E9E9; }

/* moles-to-grams-calculator — highlighted info panel */
.border-letf-blue {
    border-left: 4px solid #0c6599;
    padding: 12px 15px;
    background-color: #368ec117;
}

/* chemical-equation-balancer-calculator — suggestion list + disabled inputs */
.suggestions:hover {
    background-image: var(--bs-gradient);
    color: var(--white);
}
li .eq_link:hover {
    text-decoration: none;
}
input:disabled {
    background-color: rgb(221, 221, 221);
}

/* stoichiometry-calculator — step icon animation, response panel + katex wrapper
 * (the third-party KaTeX-class rules stay inline in the view — see note above) */
.icon_animation {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 80px;
}
.icon_animation samp {
    display: inline-block;
    position: absolute;
    left: 0;
    background: #EEF1F5;
    animation: icon_animation 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    height: 8px;
}
.main_area .icon_sty:hover .icon_animation samp {
    background: #fff;
}
.icon_animation samp:nth-child(1) {
    top: 10px;
    animation-delay: -0.24s;
}
.icon_animation samp:nth-child(2) {
    top: 28px;
    left: 0;
    animation-delay: -0.12s;
}
.icon_animation samp:nth-child(3) {
    top: 47px;
    animation-delay: 0s;
}
.icon_animation samp:nth-child(4) {
    top: 66px;
    animation-delay: 0.12s;
}
.icon_animation samp:nth-child(5) {
    top: 85px;
    animation-delay: 0.24s;
}
@keyframes icon_animation {
    0% {
        left: 0;
        width: 0;
    }
    50%, 100% {
        left: 0;
        width: 100%;
    }
}
#responseContainer {
    line-height: 2;
}
#responseContainer ol, #responseContainer ul {
    padding-left: 20px;
}
.mere_li p, .mere_li li:not(:has(p)) {
    font-size: 15px;
    letter-spacing: .5px;
    line-height: 1.5;
    color: #000000;
}
.mere_li p:not(:first-child), .mere_li ol p, .mere_li ul p, .mere_li li:not(:has(p)) {
    margin-top: 12px;
}
#responseContainer h3, #responseContainer h2 {
    font-size: 18px;
    font-weight: 600 !important;
    margin-top: 12px;
    letter-spacing: .5px;
    line-height: 1.5;
    color: #1670a7;
}
.own_katex {
    display: inline-block;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid transparent;
    width: fit-content;
    position: relative;
}
.own_katex:hover {
    border: 1px solid #1670a7;
    cursor: pointer;
}
.own_katex:hover::after {
    background: #add8e6;
    border-radius: 4px;
    bottom: 130%;
    content: "Click to Copy";
    display: block;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    position: absolute;
    width: 100px;
    z-index: 1;
    font-size: 14px;
    text-align: center;
}