/* Ball Lens Calculator — scoped styles (.ball-lens- prefix).
   Brand: yellow (#ffd400) accents, black 3D pane. */

.ball-lens-tool {
    --bl-yellow: #ffd400;
    --bl-black: #111111;
    --bl-border: #d9d9d9;
    color: #222;
    /* Convention: 10px breathing room above and below the whole tool
       (form + 3D pane) — apply to future calculators too. */
    margin: 10px 0;
}

.ball-lens-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.ball-lens-inputs {
    flex: 1 1 300px;
    min-width: 280px;
}

.ball-lens-viz-wrap {
    flex: 1 1 460px;
    min-width: 320px;
}

.ball-lens-field {
    margin-bottom: 14px;
}

.ball-lens-field label {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

.ball-lens-field .ball-lens-sub {
    font-weight: 400;
    color: #666;
    font-size: 0.85em;
}

.ball-lens-field input,
.ball-lens-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--bl-border);
    border-radius: 3px;
    font-size: 1rem;
    background: #fff;
}

.ball-lens-field input[readonly] {
    background: #f4f4f4;
    color: #444;
}

.ball-lens-field input:focus,
.ball-lens-field select:focus {
    outline: none;
    border-color: var(--bl-yellow);
    box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.35);
}

.ball-lens-results {
    margin-top: 18px;
    border-top: 3px solid var(--bl-yellow);
    padding-top: 14px;
}

.ball-lens-result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.ball-lens-result-row .ball-lens-result-label {
    font-weight: 700;
}

.ball-lens-result-row .ball-lens-result-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bl-black);
    font-variant-numeric: tabular-nums;
}

.ball-lens-error {
    display: none;
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff6f6;
    border: 1px solid #f0b4b4;
    border-radius: 3px;
    color: #a12222;
    font-size: 0.92rem;
}

.ball-lens-viz {
    width: 100%;
    height: 440px;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.ball-lens-viz-hint {
    margin-top: 6px;
    font-size: 0.82rem;
    color: #888;
    text-align: center;
}

.ball-lens-note {
    margin-top: 20px;
    font-size: 0.85rem;
    color: #666;
}