/* led-spec.css (v17, 2026-11-07) — LED Spec Finder. Same mood as planner.css: riq3 vars, dark output panel, neon #ff4fa8. */
.ls-hero{padding:30px 0 22px}
.ls-hero h1{max-width:none}
.ls-hero .lede{margin-bottom:0}
.ls{padding-top:32px}
.ls-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ls-grid{display:grid;grid-template-columns:minmax(300px,350px) 1fr;gap:24px;align-items:start}

/* inputs */
.ls-in{display:grid;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;position:sticky;top:calc(var(--hh,72px) + 16px)}
.ls-fs{border:0;margin:0;padding:0;min-width:0}
.ls-fs legend,.ls-dist>label:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;font:700 .8rem/1.2 Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 10px;padding:0}
.ls-fs legend small{font:500 .72rem Roboto,sans-serif;letter-spacing:0;text-transform:none;color:var(--mute)}
.ls-dist output{font:800 1rem Montserrat,sans-serif;letter-spacing:0;text-transform:none;color:var(--acc)}
.ls-chips{display:flex;flex-wrap:wrap;gap:7px}
.ls-chips label{position:relative;cursor:pointer}
.ls-chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.ls-chips span{display:inline-block;border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:8px 13px;font-size:.86rem;line-height:1.2;color:var(--ink);transition:.15s}
.ls-chips span small{display:block;font-size:.7rem;color:var(--mute);margin-top:1px}
.ls-chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.ls-chips input:checked+span small{color:rgba(255,255,255,.7)}
.ls-chips input:focus-visible+span{outline:3px solid var(--acc2);outline-offset:2px}
.ls-hint{margin:8px 0 0;font-size:.76rem;color:var(--mute)}
.ls-dist input[type=range]{width:100%;accent-color:var(--acc);margin:0;height:28px}
.ls-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mute);margin-top:2px}
.ls-exact{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:.8rem;color:var(--mute);margin-top:8px;white-space:nowrap}
.ls-exact input{width:100px}
.ls-size{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}
.ls-size>span{padding-bottom:12px;color:var(--mute)}
.ls-size label{display:grid;gap:5px;font-size:.78rem;color:var(--ink2)}
.ls-in input[type=number]{font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;width:100%;min-height:44px;box-sizing:border-box}
.ls-in input:focus-visible{outline:3px solid var(--acc2);outline-offset:1px}

/* output */
.ls-out{background:#0d1020;color:rgba(255,255,255,.8);border-radius:var(--r);padding:24px;position:relative;overflow:hidden;min-width:0}
.ls-out::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 260px at 85% 0%,rgba(230,0,126,.22),transparent 70%),radial-gradient(500px 240px at 0% 100%,rgba(31,111,235,.18),transparent 70%);pointer-events:none}
.ls-out>*{position:relative}
.ls-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ls-tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;min-width:0}
.ls-k{font:700 .68rem Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ff4fa8;margin:0 0 4px}
.ls-v{font:800 clamp(1.15rem,2vw,1.6rem)/1.1 Montserrat,sans-serif;color:#fff;margin:0;overflow-wrap:anywhere}
.t-pitch .ls-v{font-size:clamp(1.6rem,3vw,2.3rem)}
.ls-s{margin:5px 0 0;font-size:.76rem;line-height:1.3;color:rgba(255,255,255,.66)}
.ls-res{margin:12px 0 0;font-size:.9rem;color:rgba(255,255,255,.8)}
.ls-res b{font:800 1.05rem Montserrat,sans-serif;color:#ffd166}
.ls-res span{color:rgba(255,255,255,.6)}
.ls-fig{margin:18px 0 0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 14px 10px;min-width:0}
.ls-fig figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;align-items:baseline;margin:0 0 6px;font-size:.84rem}
.ls-fig figcaption b{font:700 .9rem Montserrat,sans-serif;color:#fff}
.ls-unit{font-size:.72rem;color:rgba(255,255,255,.55)}
.ls-key{display:flex;gap:12px;font-size:.72rem;color:rgba(255,255,255,.7)}
.ls-key i{font-style:normal}
.ls-key i::before{content:"";display:inline-block;width:16px;height:8px;border-radius:4px;margin-right:5px;vertical-align:middle;background:var(--k)}
.k-ok{--k:rgba(91,155,255,.35)}.k-best{--k:#5b9bff}.k-you{--k:#ffd166}
.ls-key .k-you::before{width:9px;height:9px;border-radius:50%}
.ls-chart{width:100%;min-width:0;overflow:hidden}
.ls-out,.ls-fig,.ls-two>*{min-width:0}
.ls-svg{display:block;max-width:100%;height:auto;font-family:Roboto,sans-serif;color:#5b9bff}
.ls-svg .c-grid{stroke:rgba(255,255,255,.07)}
.ls-svg .c-ax{fill:rgba(255,255,255,.5);font-size:11px}
.ls-svg .c-lab{fill:rgba(255,255,255,.75);font:600 12px Montserrat,sans-serif}
.ls-svg .c-lab.on{fill:#ff4fa8;font-weight:800}
.ls-svg .c-trk{fill:rgba(255,255,255,.06)}
.ls-svg .c-ok{fill:rgba(91,155,255,.32);transition:all .35s ease}
.ls-svg .c-best{fill:#5b9bff;transition:all .35s ease}
.ls-svg .c-ok.on{fill:rgba(255,79,168,.38)}.ls-svg .c-best.on{fill:#ff4fa8}
.ls-svg .c-open{fill:url(#lsfade)}
.ls-svg .c-ok.c-open.on{color:#ff4fa8}
.ls-svg .c-n{fill:rgba(255,255,255,.22)}.ls-svg .c-n.on{fill:#ff4fa8}
.ls-svg .c-n.c-open{color:rgba(255,255,255,.22);fill:url(#lsfade2)}.ls-svg .c-n.c-open.on{color:#ff4fa8}
.ls-svg .c-you{fill:#ffd166;stroke:#0d1020;stroke-width:2}
.ls-svg .c-you-l{stroke:#ffd166;stroke-width:2;stroke-dasharray:4 4}
.ls-svg .c-you-t{fill:#ffd166;font:700 11.5px Montserrat,sans-serif}
.ls-svg .c-lab.c-sm{font-size:10.5px}
.ls-two{display:grid;grid-template-columns:1.15fr 1fr;gap:14px}
.ls-two .ls-fig{margin-top:14px}
.ls-see{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ls-mo-w{min-width:0}
.ls-mo{display:block;width:100%;aspect-ratio:16/11;border-radius:8px;border:2px solid rgba(255,255,255,.12)}
.ls-mo-w.v-smooth .ls-mo{border-color:#5b9bff}.ls-mo-w.v-dots .ls-mo{border-color:#ff4fa8}
.ls-mo-w p{margin:6px 0 0;display:grid;font-size:.72rem;line-height:1.3;color:rgba(255,255,255,.62)}
.ls-mo-w p b{font:700 .8rem Montserrat,sans-serif;color:#fff}
.ls-mo-w.v-dots p b{color:#ff4fa8}
.ls-src{margin:16px 0 0;font-size:.78rem;color:rgba(255,255,255,.6)}
.ls-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ls-out .btn-o{color:#fff}.ls-out .btn-o:hover{background:#fff;color:var(--ink)}
.ls-sheet{display:none}

@media (max-width:1100px){.ls-grid{grid-template-columns:minmax(0,1fr)}.ls-in{position:static}}
@media (max-width:760px){
 .ls-hero{padding:28px 0 18px}.ls{padding-top:18px}
 .ls-in{padding:16px}.ls-out{padding:16px 12px}
 .ls-tiles{grid-template-columns:1fr 1fr;gap:8px}
 .ls-tile{padding:10px 11px}
 .ls-two{grid-template-columns:1fr;gap:0}
 .ls-fig{padding:12px 10px 8px}
 .ls-acts .btn{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.ls-svg *,.ls-chips span{transition:none!important}}

/* print: branded spec sheet only (pattern of planner.css) */
@media print{
 @page{size:A4;margin:14mm}
 body{background:#fff}
 .hdr,.ftr,.fab,.stg,.ctaband,.jump,.ckb,#ckb,.skip,.wa,main>section{display:none!important}
 body,body:has(#ckb:not([hidden])){padding:0!important}
 main{padding:0}
 .ls-sheet{display:block;font:12px/1.45 Roboto,Arial,sans-serif;color:#111522}
 .ls-sh-hd{display:flex;gap:16px;align-items:center;border-bottom:3px solid #E6007E;padding-bottom:10px;margin-bottom:12px}
 .ls-sh-hd h1{font-size:20px;margin:0}.ls-sh-hd p{margin:0}.ls-sh-hd .eyebrow{margin:0 0 2px}
 .ls-sh-in{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 16px;margin:0 0 12px}
 .ls-sh-in dt{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:#6b7285}.ls-sh-in dd{margin:0;font-weight:700}
 .ls-sh-tbl{width:100%;border-collapse:collapse;margin:0 0 12px}
 .ls-sh-tbl th,.ls-sh-tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid #e3e6ee}
 .ls-sh-tbl th{width:34%;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#6b7285}
 .ls-sh-tbl td{font-weight:700}
 .ls-sh-chart .ls-svg{width:100%;height:auto;color:#1f6feb}
 .ls-sh-chart .c-grid{stroke:#e3e6ee}.ls-sh-chart .c-ax{fill:#6b7285}.ls-sh-chart .c-lab{fill:#3a4154}.ls-sh-chart .c-lab.on{fill:#E6007E}
 .ls-sh-chart .c-trk{fill:#eceff6}.ls-sh-chart .c-ok{fill:rgba(31,111,235,.25)}.ls-sh-chart .c-best{fill:#1f6feb}
 .ls-sh-chart .c-ok.on{fill:rgba(230,0,126,.3)}.ls-sh-chart .c-best.on{fill:#E6007E}.ls-sh-chart .c-ok.c-open.on{color:#E6007E}
 .ls-sh-chart .c-you{fill:#d99a00;stroke:#fff}.ls-sh-chart .c-you-l{stroke:#d99a00}.ls-sh-chart .c-you-t{fill:#b07a00}
 .ls-sh-disc{border:1px solid #f5a524;background:#fff4e0;border-radius:6px;padding:6px 10px;margin:12px 0 0}
 .ls-sheet,.ls-sheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .ls-sh-ft{margin-top:12px;display:grid;gap:3px;border-top:1px solid #e3e6ee;padding-top:8px}
}