/* Compact family choices; large reference leaves nested like calissons. */
.family-picker{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;flex-shrink:0;padding:2px 0 14px;max-width:1400px;width:100%;margin:0 auto}
.family-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-width:0;padding:5px 2px;color:var(--ink);font-size:11px;line-height:1.3;text-align:center;border-radius:5px;opacity:.7}
.family-choice svg{display:block;width:28px;height:48px;overflow:visible;transition:transform .18s}
.family-choice span{min-height:29px;display:flex;align-items:center;justify-content:center}
.family-choice[aria-pressed=true]{opacity:1;font-weight:600;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.family-choice[aria-pressed=true] svg{transform:translateY(-2px)}
.family-choice small{font-size:9px;font-weight:400;opacity:.7}.family-choice:disabled{opacity:.25}
.family-description{font:500 16px/1.4 Manrope,'DM Sans',sans-serif;margin:0 0 18px}
.color-card{text-align:center;padding:6px 5px 10px}
.color-card .color-sample{display:block;background:none;border:0;border-radius:0;outline:none!important;height:140px;width:100%;margin:0 auto 12px;overflow:visible}
.color-card .color-sample>path:first-child{stroke:var(--ink);stroke-opacity:.12;stroke-width:.6}
.color-card.selected .color-sample>path:first-child{stroke-opacity:.8;stroke-width:1.5}
.sample-check{display:none}.color-card.selected .sample-check{display:block}
.color-card .color-title{font-size:12px}.color-card small{font-size:9px}
.color-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px}
.families-mode #app{height:var(--viewport-height);min-height:650px}
.families-mode main{flex:1;min-height:280px;align-items:stretch;max-width:1400px;grid-template-columns:minmax(0,1fr) 215px;gap:28px}
.families-mode .canvas-area{min-width:0;min-height:0}
.families-mode .grid-panel{height:100%;max-height:none;min-height:0;padding:8px 14px 20px 4px;overscroll-behavior:contain;scrollbar-gutter:stable}
.families-mode .results-head{margin-bottom:9px}
.families-mode .neutral-section{display:none}
.swatches-mode .color-grid{position:relative;display:block;width:100%;isolation:isolate}
/* Ignore empty corners when leaves' rectangular bounds interlock. Only the
   painted SVG leaf and its central label receive pointer events. */
.swatches-mode .color-card{position:absolute;display:block;padding:0;margin:0;pointer-events:none;color:var(--sample-ink);line-height:1.35;border:0;outline:0}
.swatches-mode .color-card .color-sample{width:100%;height:100%;margin:0;pointer-events:none}
.swatches-mode .color-card .color-sample>path:first-child{pointer-events:visiblePainted;stroke:var(--sample-ink);stroke-width:.6;stroke-opacity:.16}
.swatches-mode .color-card .color-title{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:78%;font:500 12px/1.35 'DM Sans',sans-serif;text-wrap:balance;pointer-events:auto}
.swatches-mode .color-card small{position:absolute;left:50%;top:59%;transform:translate(-50%,-50%);width:76%;font-size:9px;line-height:1.4;margin:0;opacity:.8;letter-spacing:.4px;pointer-events:auto}
.swatches-mode .color-card .sample-check{transform:translateY(39px);pointer-events:none;stroke-width:2}
.swatches-mode .color-card:hover .color-sample>path:first-child{stroke-opacity:.55;stroke-width:1.2}
.swatches-mode .color-card.selected .color-sample>path:first-child{stroke-opacity:.9;stroke-width:1.5}
.swatches-mode .color-card:focus-visible .color-sample>path:first-child{stroke-opacity:1;stroke-width:2;stroke-dasharray:3 2}
.families-mode .selection{padding-left:10px}
@media(max-width:1100px){.family-picker{gap:5px}.family-choice{font-size:10px}.families-mode main{grid-template-columns:minmax(0,1fr) 180px;gap:18px}.families-mode .selection h2{font-size:26px}}
@media(max-width:1000px){.color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
 .toolbar{flex-wrap:wrap;gap:6px}.view-tabs button{min-height:44px;padding:8px}.search-wrap{width:100%;min-height:40px}
 .family-picker{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 0 10px;gap:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 .family-choice{flex:0 0 110px;scroll-snap-align:start;font-size:10px;padding:5px 4px;gap:3px}.family-choice svg{height:34px;width:20px}.family-choice span{min-height:26px}.family-choice small{font-size:8px}
 .color-card .color-sample{height:108px;margin-bottom:8px}.color-card .color-title{font-size:10px}.color-grid{gap:14px 8px}
 .families-mode #app{min-height:790px}
 .families-mode main{display:flex;flex-direction:column;min-height:350px;gap:8px}
 .families-mode .canvas-area{flex:1;min-height:245px}
 .families-mode .grid-panel{position:absolute;inset:0;height:100%;min-height:0;padding:5px 2px 12px}
 .families-mode .selection{flex-shrink:0;padding:6px 0;min-height:65px}.families-mode .selection h2{font-size:21px}
 .swatches-mode .color-card .color-title{font-size:11px}.swatches-mode .color-card small{font-size:8px}
 .family-description{font-size:14px;margin:0 0 12px}
}
@media(max-height:650px) and (orientation:landscape){.families-mode #app{height:auto;min-height:650px}.families-mode main{min-height:330px}.families-mode .grid-panel{max-height:400px}.family-choice svg{height:32px}.family-choice span{min-height:25px}}
@media(prefers-reduced-motion:reduce){.family-choice svg{transition:none}}