/* Shared Key Digital tools framework styles, loaded on all /tools/* paths.
   Generalized .kd-tool-* UI so each calculator ships as just formula + content.
   (The 2 original tools keep their own .kdmh-*/.kdsvd-* styles; new tools use these.) */

/* Layout: controls | output */
.kd-tool-app { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; margin: 24px 0 8px; }
@media (max-width: 820px) { .kd-tool-app { grid-template-columns: 1fr; } }
.kd-tool-controls, .kd-tool-form { display: flex; flex-direction: column; gap: 16px; }
.kd-tool-output { display: flex; flex-direction: column; gap: 14px; }

/* Fields */
.kd-tool-field { display: flex; flex-direction: column; gap: 6px; }
.kd-tool-field label, .kd-tool-legend { font-weight: 600; font-size: 14px; color: var(--kd-ink-100, #14253b); }
.kd-tool-field input[type="number"], .kd-tool-field input[type="text"], .kd-tool-field select {
  padding: 10px 12px; border: 1px solid var(--kd-line-strong, #c9d2dd); border-radius: 6px; font-size: 15px; width: 100%;
}
.kd-tool-field .kd-tool-hint { font-size: 12px; color: #5a6b7e; font-weight: 400; }
.kd-tool-inline { display: flex; gap: 8px; align-items: center; }
.kd-tool-inline input { flex: 1; }
.kd-tool-inline select { width: auto; }

/* Chips (presets) */
.kd-tool-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kd-tool-chip { padding: 6px 12px; border: 1px solid var(--kd-line-strong, #c9d2dd); border-radius: 999px; background: #fff; cursor: pointer; font-size: 13px; }
.kd-tool-chip:hover { background: var(--kd-surface-2, #eef2f7); }

/* Unit radios */
.kd-tool-units { display: flex; gap: 14px; align-items: center; }
.kd-tool-units label { font-weight: 400; }

/* Advanced toggle */
.kd-tool-advanced { border-top: 1px solid var(--kd-line-strong, #c9d2dd); padding-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.kd-tool-advanced-toggle { background: none; border: none; color: var(--kd-teal, #0a8a8a); cursor: pointer; font-weight: 600; padding: 0; text-align: left; }

/* Results panel */
.kd-tool-results { background: var(--kd-surface-2, #eef2f7); border-radius: 8px; padding: 18px 20px; }
.kd-tool-hero { font-size: 13px; color: #5a6b7e; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.kd-tool-hero-val { font-size: 30px; font-weight: 700; color: var(--kd-navy, #0b2a4a); margin: 0 0 12px; }
.kd-tool-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #dde4ec; font-size: 15px; }
.kd-tool-row span:first-child { color: #5a6b7e; }

/* SVG diagram + primitives */
.kd-tool-svg { width: 100%; height: auto; background: #fff; border: 1px solid var(--kd-line-strong, #c9d2dd); border-radius: 8px; }
.kd-tool-floor, .kd-tool-wall { stroke: #9aa7b6; stroke-width: 2; }
.kd-tool-box { fill: #5a6b7e; }
.kd-tool-box--accent { fill: var(--kd-teal, #0a8a8a); }
.kd-tool-screen { fill: var(--kd-navy, #0b2a4a); opacity: .9; }
.kd-tool-dim { stroke: #b04632; stroke-width: 1; }
.kd-tool-eye { stroke: var(--kd-teal, #0a8a8a); stroke-width: 1; stroke-dasharray: 4 3; }
.kd-tool-label { font: 11px Arial, sans-serif; fill: #5a6b7e; }
.kd-tool-strong { font: 700 14px Arial, sans-serif; fill: var(--kd-navy, #0b2a4a); }

/* Engineering notices (collapsible, native details/summary) */
.kd-tool-notices { margin: 26px 0; }
.kd-tool-notice { border-left: 4px solid var(--kd-teal, #0a8a8a); background: var(--kd-surface-2, #eef2f7); border-radius: 6px; padding: 12px 16px; margin: 12px 0; }
.kd-tool-notice--warn { border-left-color: #b04632; background: #fbeeea; }
.kd-tool-notice > summary { cursor: pointer; font-size: 15px; line-height: 1.5; list-style: none; }
.kd-tool-notice > summary::-webkit-details-marker { display: none; }
.kd-tool-notice__more { color: var(--kd-teal, #0a8a8a); font-weight: 600; font-size: 13px; margin-left: 4px; white-space: nowrap; }
.kd-tool-notice--warn .kd-tool-notice__more { color: #b04632; }
.kd-tool-notice[open] .kd-tool-notice__more { display: none; }
.kd-tool-notice > p { margin: 10px 0 2px; font-size: 14px; line-height: 1.6; color: var(--kd-ink-100, #14253b); }

/* FAQ accordion */
.kd-tool-faq { margin: 8px 0; }
.kd-tool-faq-item { border-top: 1px solid var(--kd-line-strong, #c9d2dd); padding: 12px 0; }
.kd-tool-faq-item:last-child { border-bottom: 1px solid var(--kd-line-strong, #c9d2dd); }
.kd-tool-faq-item > summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--kd-ink-100, #14253b); list-style: none; }
.kd-tool-faq-item > summary::-webkit-details-marker { display: none; }
.kd-tool-faq-item > summary::after { content: "+"; float: right; color: var(--kd-teal, #0a8a8a); font-weight: 700; }
.kd-tool-faq-item[open] > summary::after { content: "\2212"; }
.kd-tool-faq-item__a { padding: 8px 0 2px; font-size: 15px; line-height: 1.6; color: var(--kd-ink-100, #14253b); }

/* Related tools */
.kd-tool-related { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.kd-tool-related a { display: inline-block; padding: 8px 14px; border: 1px solid var(--kd-line-strong, #c9d2dd); border-radius: 999px; font-size: 14px; color: var(--kd-teal, #0a8a8a); }
.kd-tool-related a:hover { background: var(--kd-surface-2, #eef2f7); }