/* Screen Size & Viewing Distance Calculator — loaded only on the tool page */
.kdsvd-app { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; margin: 24px 0 8px; }
@media (max-width: 820px) { .kdsvd-app { grid-template-columns: 1fr; } }
.kdsvd-form { display: flex; flex-direction: column; gap: 16px; }
.kdsvd-field { display: flex; flex-direction: column; gap: 6px; }
.kdsvd-field label, .kdsvd-legend { font-weight: 600; font-size: 14px; color: var(--kd-ink-100, #14253b); }
.kdsvd-field input[type="number"], .kdsvd-field select {
  padding: 10px 12px; border: 1px solid var(--kd-line-strong, #c9d2dd); border-radius: 6px; font-size: 15px; width: 100%;
}
.kdsvd-toggle { display: flex; gap: 0; border: 1px solid var(--kd-line-strong, #c9d2dd); border-radius: 6px; overflow: hidden; }
.kdsvd-toggle label { flex: 1; text-align: center; padding: 9px 8px; font-size: 14px; cursor: pointer; }
.kdsvd-toggle input { position: absolute; opacity: 0; }
.kdsvd-toggle input:checked + span { background: var(--kd-navy, #0b2a4a); color: #fff; }
.kdsvd-toggle span { display: block; padding: 9px 8px; margin: -9px -8px; }
.kdsvd-units { display: flex; gap: 14px; align-items: center; }
.kdsvd-results { background: var(--kd-surface-2, #eef2f7); border-radius: 8px; padding: 18px 20px; margin-bottom: 14px; }
.kdsvd-rlabel { font-size: 12px; color: #5a6b7e; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 2px; }
.kdsvd-primary { font-size: 28px; font-weight: 700; color: var(--kd-navy, #0b2a4a); margin: 0 0 14px; }
.kdsvd-secondary { font-size: 17px; font-weight: 600; color: var(--kd-ink-100, #14253b); margin: 0; }
.kdsvd-svg { width: 100%; height: auto; background: #fff; border: 1px solid var(--kd-line-strong, #c9d2dd); border-radius: 8px; }
.kdsvd-cone { fill: var(--kd-teal, #0a8a8a); opacity: .15; stroke: var(--kd-teal, #0a8a8a); stroke-width: 1; }
.kdsvd-screen { fill: var(--kd-navy, #0b2a4a); }
.kdsvd-viewer { fill: #b04632; }
.kdsvd-label { font: 11px Arial, sans-serif; fill: #5a6b7e; }