/* ============================================
   atmospheric-refraction.css — 大气折射修正工具专用样式
   ============================================ */

/* ---- Method Selector ---- */
.method-selector {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.method-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-fast);
    background: var(--color-bg);
}

.method-option:hover {
    border-color: var(--color-primary-light);
    background: var(--color-sky);
}

.method-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.method-name {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9375rem;
    margin-bottom: 2px;
}

.method-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ---- Calculate Button ---- */
.btn-calculate {
    width: 100%;
    margin-top: var(--space-xl);
    justify-content: center;
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
}

/* ---- Result Box Enhancements ---- */
.tool-result-box .result-value {
    font-family: var(--font-mono);
    font-size: 1rem;
}

.tool-result-box .result-value.highlight {
    font-size: 1.375rem;
    color: var(--color-primary);
}

/* ---- Batch Table ---- */
.batch-table-wrap {
    overflow-x: auto;
    margin-top: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.batch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 500px;
}

.batch-table th,
.batch-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    border-bottom: 1px solid var(--color-border-light);
}

.batch-table th {
    background: var(--color-bg);
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.batch-table td {
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
}

.batch-table tr:hover td {
    background: var(--color-sky);
}

.batch-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---- Curve Canvas ---- */
.curve-canvas-wrap {
    margin-top: var(--space-xl);
    background: linear-gradient(135deg, #0a1628, #1a3a5c);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-lg);
}

.curve-canvas-wrap canvas {
    width: 100%;
    height: auto;
    display: block;
}

.curve-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    margin-top: var(--space-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.legend-color {
    width: 24px;
    height: 4px;
    border-radius: var(--radius-full);
    display: inline-block;
}

/* ---- Principle Canvas ---- */
.principle-canvas-wrap {
    background: linear-gradient(135deg, #0a1628, #1a3a5c);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-md);
}

.principle-canvas-wrap canvas {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Wavelength Canvas ---- */
.wavelength-demo-canvas-wrap {
    background: linear-gradient(135deg, #0a1628, #1a3a5c);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--space-lg);
}

.wavelength-demo-canvas-wrap canvas {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Related Links in Sidebar ---- */
.related-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    text-decoration: none;
    color: inherit;
    margin-bottom: var(--space-sm);
}

.related-link:hover {
    background: var(--color-sky);
}

.related-link .rl-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-sky), var(--color-sky-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.related-link div strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-text);
    margin-bottom: 2px;
}

.related-link div span {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ---- Reference Data Table in Sidebar ---- */
.ref-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-top: var(--space-sm);
}

.ref-data-table th,
.ref-data-table td {
    padding: var(--space-xs) var(--space-sm);
    text-align: center;
    border-bottom: 1px solid var(--color-border-light);
}

.ref-data-table th {
    background: var(--color-bg);
    font-weight: 600;
    color: var(--color-text);
}

.ref-data-table td {
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
}

/* ---- Knowledge Section Tables ---- */
.knowledge-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-top: var(--space-md);
}

.knowledge-table th,
.knowledge-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.knowledge-table th {
    background: var(--color-bg);
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.8125rem;
}

.knowledge-table td {
    color: var(--color-text-secondary);
}

.knowledge-table tr:hover td {
    background: var(--color-sky);
}

/* ---- Unit Labels ---- */
.unit {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.8125rem;
}

/* ---- Responsive Adjustments ---- */
@media (max-width: 1023px) {
    .curve-legend {
        gap: var(--space-sm);
    }
    .legend-item {
        font-size: 0.75rem;
    }
}

@media (max-width: 479px) {
    .method-option {
        padding: var(--space-sm);
    }
    .batch-table th,
    .batch-table td {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.75rem;
    }
    .curve-canvas-wrap {
        padding: var(--space-sm);
    }
}