/* FEMORALE — shared family-list visual standard
   Reference: /shells/index.asp (All Families — Available), 09 Nov 2026.
   Opt-in: wrap a page's family sections in .shellFamilies.
   IMPORTANT: links must arrive in alphabetical DOM order. CSS does not sort.
   Multicolumn flow reads TOP TO BOTTOM, then LEFT TO RIGHT.
   Accordion behavior (exclusive opening and mobile scroll) is JavaScript,
   not CSS. Do not remove the working JS from the reference page.
*/
.shellFamilies{font-family:"Segoe UI",Tahoma,Arial,sans-serif;}
.shellFamilies .familySection{margin:0 18px 15px;padding:0 0 13px;border-bottom:1px solid #e2dfd8;}
.shellFamilies .familySection:last-child{border-bottom:0;margin-bottom:0;}
.shellFamilies .classhead{
 display:flex;align-items:center;gap:12px;box-sizing:border-box;
 margin:0 0 8px;padding:7px 10px;
 border:1px solid #d8d6cf;border-radius:6px;
 background:linear-gradient(#fbfbf8,#f0efe9);
 box-shadow:0 1px 2px rgba(0,0,0,.04);
 font:700 17px/1.2 "Segoe UI",Tahoma,Arial,sans-serif;
 color:#2d2d2d;cursor:pointer;list-style:none;
}
.shellFamilies .classhead::-webkit-details-marker{display:none;}
.shellFamilies .familyCount{
 margin-left:auto;color:#777;white-space:nowrap;
 font:600 12px/1.2 "Segoe UI",Tahoma,Arial,sans-serif;
}
.shellFamilies .classhead::after{content:"+";font-size:15px;font-weight:400;margin-left:8px;}
.shellFamilies details[open]>.classhead::after{content:"-";}
.shellFamilies .familyGrid{
 display:block;column-count:5;column-gap:24px;
 padding:0 14px;
}
.shellFamilies a.familyLink,
.shellFamilies a.familyLink:link,
.shellFamilies a.familyLink:visited{
 display:block;box-sizing:border-box;min-width:0;
 padding:2px 6px;border-radius:4px;
 font:600 14px/1.18 "Segoe UI",Tahoma,Arial,sans-serif;
 color:#3b3b3b;text-transform:uppercase;text-decoration:none;
 overflow-wrap:break-word;break-inside:avoid-column;
 -webkit-column-break-inside:avoid;page-break-inside:avoid;
}
.shellFamilies a.familyLink:hover{background:#fff4e7;color:#c96810;text-decoration:none;}
@media(max-width:1250px){.shellFamilies .familyGrid{column-count:4;}}
@media(max-width:1050px){.shellFamilies .familyGrid{column-count:3;}}
@media(max-width:700px){
 .shellFamilies .familySection{margin:0 0 8px;padding:0;border:0;}
 .shellFamilies .classhead{margin:0;padding:12px 10px;font-size:15px;}
 .shellFamilies .classhead::after{font-size:20px;}
 .shellFamilies .familyGrid{
   display:block;column-count:2;column-gap:10px;
   padding:8px 4px 14px;
 }
 .shellFamilies a.familyLink,
 .shellFamilies a.familyLink:link,
 .shellFamilies a.familyLink:visited{
   font-size:13px;line-height:1.3;padding:3px;
   overflow-wrap:break-word;hyphens:none;
 }
}
@media(max-width:300px){.shellFamilies .familyGrid{column-count:1;}}