:root{--motion-quick:220ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
.results-tabs{position:relative;isolation:isolate}
.results-tabs::before{content:"";position:absolute;top:3px;bottom:3px;left:0;width:var(--tab-width,0px);transform:translateX(var(--tab-x,3px));background:#fff;box-shadow:0 1px 4px #0001;border-radius:6px;z-index:-1;pointer-events:none}
.results-tabs[data-motion-ready]::before{transition:transform var(--motion-quick) var(--motion-ease),width var(--motion-quick) var(--motion-ease)}
.results-tabs[data-motion-ready] button.active{background:transparent;box-shadow:none}
dialog[data-motion-dialog]{transform-origin:center;will-change:auto}
#save-site[aria-pressed="true"] svg,#save-sample[aria-pressed="true"] svg{fill:currentColor}
.save-button svg,#save-site svg,#save-sample svg{transform-origin:center;transition:fill 160ms,color 160ms}

/* Native radios keep arrow-key navigation, focus and form behavior. */
.need-filter-grid{grid-template-columns:1fr 1.8fr;gap:20px 24px}
.need-layout-field{grid-column:1/-1}
.need-layout-field legend{display:flex;align-items:baseline;gap:10px}
.need-layout-field legend small{font-size:11px;font-weight:400;color:var(--muted)}
.layout-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.layout-option{position:relative;cursor:pointer;min-width:0}
.layout-option input{position:absolute;width:1px;height:1px;opacity:0;margin:0;top:50%;left:50%}
.layout-option-content{height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);font-size:11px;transition:background-color 160ms,border-color 160ms,box-shadow 160ms,color 160ms}
.layout-diagram{width:76px;height:42px;stroke:#a3a3a3;stroke-width:1.4;fill:none;transition:stroke 160ms,transform 200ms var(--motion-ease)}
.layout-diagram .diagram-fill{fill:#e9e9e9;stroke:none;transition:fill 160ms}
.layout-option:hover .layout-option-content{border-color:#b5b5b5;background:#fafafa;color:var(--ink)}
.layout-option input:checked+.layout-option-content{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#f8f8f8;color:var(--ink)}
.layout-option input:checked+.layout-option-content .layout-diagram{stroke:#525252;transform:translateY(-1px)}
.layout-option input:checked+.layout-option-content .diagram-fill{fill:#d5d5d5}
.layout-option input:focus-visible+.layout-option-content{outline:2px solid var(--ink);outline-offset:4px}
.layout-check{position:absolute;top:6px;right:6px;width:14px;height:14px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:50%;opacity:0;transform:scale(.65);transition:opacity 160ms,transform 180ms var(--motion-ease)}
.layout-check svg{width:10px;height:10px;stroke-width:2}
.layout-option input:checked+.layout-option-content .layout-check{opacity:1;transform:scale(1)}
@media(max-width:1100px){.need-filter-grid{grid-template-columns:1fr 1.8fr}.need-filter-grid fieldset:last-child{grid-column:auto}.layout-options{gap:8px}.layout-diagram{width:64px}}
@media(max-width:760px){.need-filter-grid{grid-template-columns:1fr;gap:20px}.need-layout-field{grid-column:auto}.layout-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.layout-option-content{height:88px}.need-implementation{grid-template-columns:1fr 1fr}.need-layout-field legend{flex-wrap:wrap;gap:6px}.layout-diagram{width:72px}}
@media(max-width:560px){.brand small{display:none}.library-nav .nav-row{width:auto;white-space:nowrap;font-size:11px;padding:8px 6px}}
@media(prefers-reduced-motion:reduce){.results-tabs::before,.layout-option-content,.layout-diagram,.layout-check,.save-button svg,#save-site svg,#save-sample svg{transition:none!important}}