/**
 * MOL-GOD Purity Check — Styles (mobile-first, WCAG 2.1 AA)
 */
.purity-check-accordion .accordion-content { padding: 20px; }
.purity-check-accordion .badge.quality {
    background: #e0f2fe;
    color: #075985;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 8px;
}

.purity-check-intro {
    background: #ecf0f1;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #2c3e50;
}

.no-methods-notice {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.method-selection { margin: 20px 0; }
.method-selection label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}
.test-method-selector {
    width: 100%;
    padding: 12px;
    border: 2px solid #3498db;
    border-radius: 8px;
    font-size: 15px;
    background: white;
    cursor: pointer;
}
.test-method-selector:focus {
    outline: none;
    border-color: #2980b9;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.method-card {
    background: white;
    border: 2px solid #3498db;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}
.method-card h4 { margin: 0 0 12px; color: #2c3e50; font-size: 18px; }
.method-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
    padding: 12px;
    background: #ecf0f1;
    border-radius: 6px;
}
.meta-item { font-size: 13px; color: #34495e; }
.meta-item strong { color: #2c3e50; }
.difficulty-easy { color: #27ae60; }
.difficulty-intermediate { color: #f39c12; }
.difficulty-advanced { color: #e74c3c; }
.method-description { margin: 15px 0; line-height: 1.6; color: #555; }

.method-procedure,
.method-equipment { margin: 15px 0; }
.method-procedure summary,
.method-equipment summary {
    cursor: pointer;
    font-weight: 600;
    color: #3498db;
    padding: 10px;
    background: #ecf0f1;
    border-radius: 6px;
}
.method-procedure ol,
.method-equipment ul { margin: 10px 0; padding-left: 25px; }
.method-procedure li,
.method-equipment li { margin: 8px 0; line-height: 1.5; }

.method-safety {
    background: #fff3cd;
    border-left: 4px solid #f39c12;
    padding: 15px;
    margin: 15px 0;
    border-radius: 6px;
}
.method-safety h5 { margin: 0 0 10px; color: #e67e22; }
.method-safety ul { margin: 0; padding-left: 25px; }

.measurement-card {
    background: white;
    border: 2px solid #27ae60;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}
.measurement-card h4 { margin: 0 0 15px; color: #2c3e50; }
.purity-calc-form { margin-top: 15px; }

.input-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 20px;
}
@media (min-width: 641px) {
    .input-grid { grid-template-columns: repeat(2, 1fr); }
}
.input-group { display: flex; flex-direction: column; }
.input-group label {
    margin-bottom: 6px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}
.input-group input {
    padding: 10px;
    border: 2px solid #bdc3c7;
    border-radius: 6px;
    font-size: 15px;
}
.input-group input:focus {
    outline: none;
    border-color: #27ae60;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
}
.input-group small {
    margin-top: 4px;
    font-size: 12px;
    color: #7f8c8d;
}

.method-constants {
    background: #e8f5e9;
    padding: 12px;
    border-radius: 6px;
    margin: 15px 0;
}
.method-constants p {
    margin: 5px 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.btn-calculate-purity {
    width: 100%;
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-calculate-purity:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.3);
}
.btn-calculate-purity:disabled {
    background: #95a5a6;
    cursor: not-allowed;
    transform: none;
}

.results-card {
    background: white;
    border: 2px solid #27ae60;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}
.results-card h4 { margin: 0 0 20px; color: #2c3e50; }

.result-main {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 5px solid #27ae60;
    margin-bottom: 20px;
}
.result-emoji { font-size: 48px; }
.result-value {
    font-size: 36px;
    font-weight: 700;
    color: #27ae60;
    line-height: 1;
}
.result-label { font-size: 14px; color: #7f8c8d; margin-top: 5px; }

.verdict-box {
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid;
    margin: 15px 0;
}
.verdict-box h5 { margin: 0 0 8px; font-size: 16px; }
.verdict-box p { margin: 0; line-height: 1.6; }

.result-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 15px 0;
}
@media (min-width: 641px) {
    .result-metrics { grid-template-columns: repeat(2, 1fr); }
}
.metric-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #ecf0f1;
    border-radius: 6px;
}
.metric-label { font-weight: 600; color: #2c3e50; }
.metric-value { color: #27ae60; font-weight: 700; }

.calculation-steps { margin: 15px 0; }
.calculation-steps summary {
    cursor: pointer;
    font-weight: 600;
    color: #3498db;
    padding: 10px;
    background: #ecf0f1;
    border-radius: 6px;
}
.calculation-steps ol {
    margin: 10px 0;
    padding-left: 25px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}
.calculation-steps li { margin: 6px 0; }

.purity-error-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #e74c3c;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    max-width: 300px;
}

.purity-check-accordion .hidden { display: none; }

.purity-check-accordion a:focus,
.purity-check-accordion button:focus,
.purity-check-accordion input:focus,
.purity-check-accordion select:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}