.curtain-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.curtain-choice { position: relative; cursor: pointer; }
.curtain-choice > span { display: block; height: 100%; padding: 13px 12px 13px 34px; margin: 0; color: var(--text); font-size: .875rem; }
.curtain-choice input { position: absolute; top: 17px; left: 10px; margin: 0; accent-color: var(--accent); }
.curtain-choice input:checked + span { border-color: var(--accent); background: #e5f4ef; box-shadow: inset 0 0 0 1px var(--accent); }
.curtain-choice input:focus-visible + span { outline: 3px solid #cc7d14; outline-offset: 3px; }
.curtain-choice small { display: block; margin-top: 5px; font-size: .8125rem; line-height: 1.7; color: var(--muted); }
.curtain-error { color: #a02724; line-height: 1.8; }
.curtain-error:empty { margin: 0; }
.curtain-result { border-top: 4px solid var(--accent); }
.curtain-result h2 { scroll-margin-top: 20px; }
.curtain-size { color: var(--accent); font-size: clamp(1.4rem,3vw,1.9rem); font-weight: 800; line-height: 1.7; margin: 8px 0; }
.curtain-size span { white-space: nowrap; display: inline-block; }
.curtain-result .recommended { margin-top: 16px; }
.curtain-result h3 { margin: 0 0 8px; }
.curtain-content { max-width: 850px; margin-top: 36px; }
.curtain-content section { margin-block: 32px; }
.curtain-content li, .curtain-result li, .curtain-guide li { line-height: 1.85; margin-block: 8px; }
.curtain-content ul, .curtain-result ol, .curtain-guide ul { padding-left: 24px; }
.curtain-guide { border-top: 1px solid var(--border); margin-top: 24px; }
.curtain-diagram { position: relative; height: 190px; margin: 12px 0 20px; border-bottom: 3px solid #718b90; }
.curtain-rail { position: absolute; top: 32px; left: 12%; right: 24%; border-top: 5px solid #52686d; }
.curtain-window { position: absolute; top: 49px; bottom: 34px; left: 18%; right: 30%; border: 3px solid #aabfc4; background: linear-gradient(90deg,transparent 49%,#aabfc4 49%,#aabfc4 51%,transparent 51%),#f0f8f6; }
.curtain-runner { position: absolute; left: 14%; top: 36px; width: 9px; height: 10px; border: 2px solid var(--accent); border-radius: 50%; }
.curtain-width-arrow { position: absolute; top: 1px; left: 12%; right: 24%; text-align: center; font-size: .8125rem; border-bottom: 1px solid var(--accent); }
.curtain-height-arrow { position: absolute; top: 46px; bottom: 0; right: 18%; border-left: 1px solid var(--accent); width: 1px; }
.curtain-height-arrow span { position: absolute; top: 30%; left: 7px; writing-mode: vertical-rl; font-size: .8125rem; white-space: nowrap; }
.curtain-diagram[data-base=sill] .curtain-height-arrow { bottom: 34px; }
.curtain-diagram figcaption { position: absolute; bottom: 2px; left: 0; font-size: .75rem; color: var(--muted); }
.curtain-guide summary { font-size: .9375rem; }
[hidden] { display: none !important; }
@media(max-width:360px) { .curtain-choices { grid-template-columns: 1fr; } }