.family-grid-primary { grid-template-columns:repeat(4,minmax(0,1fr)); }
.family-more { min-height:166px; padding:22px; border:1px solid #9d897a; border-radius:20px; background:linear-gradient(145deg,#fbf2eb,#fffefa); color:var(--ink); text-align:left; font:inherit; cursor:pointer; box-shadow:0 8px 24px rgba(53,72,66,.035); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.family-more:hover,.family-more.is-open { transform:translateY(-3px); border-color:#907c6e; box-shadow:0 14px 30px rgba(53,72,66,.065); }
.family-more:focus-visible { outline-color:var(--focus); outline-offset:3px; }
.family-more > strong,.family-more > span { display:block; }
.family-more > strong { margin:12px 0 5px; font-size:1.08rem; }
.family-more > span:last-child { color:var(--muted); font-size:.82rem; line-height:1.4; }
.more-family { margin-top:28px; padding:26px; border:1px solid var(--line); border-radius:22px; background:#f8fbf9; }
.more-family-title { margin:0 0 18px; color:var(--ink); font-weight:850; }
.family-grid-more { grid-template-columns:repeat(5,minmax(0,1fr)); }
.condition-card { min-height:0; }
.condition-kicker { color:var(--brand-2); font-size:.69rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.condition-card h3 { margin-top:10px; }
.condition-help { margin:0 0 16px; font-size:.88rem; line-height:1.5; }
.tracker-variants { display:grid; gap:10px; margin-top:auto; }
.tracker-variant { padding-top:14px; border-top:1px solid var(--line); }
.tracker-variant[hidden] { display:none; }
.tracker-variant .species-badge { margin-bottom:8px; }
.tracker-variant p { margin:0 0 12px; font-size:.84rem; line-height:1.45; }
.tracker-variant .download-link { display:inline-flex; align-items:center; }
.condition-card.has-multiple-variants .tracker-variants { gap:12px; }
.condition-card.has-multiple-variants .tracker-variant { padding:14px; border:1px solid #e0e8e4; border-radius:14px; background:#fbfdfc; }
/* Browsing the whole library at once: cards pack by height so a concern with six
   tailored versions does not leave a hole beside the single-version cards. */
.tracker-grid { display:block; columns:3 300px; column-gap:18px; }
.tracker-grid > .tracker-card { width:100%; min-height:0; margin:0 0 18px; break-inside:avoid; content-visibility:visible; }
.tracker-grid > .tracker-card[hidden] { display:none; }
.tracker-card:hover { transform:none; }
.condition-kicker { color:var(--muted); letter-spacing:.06em; }
.condition-card h3 { margin:6px 0 14px; font-size:1.2rem; }
.condition-card.has-multiple-variants .tracker-variant { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; padding:10px 12px; }
.condition-card.has-multiple-variants .tracker-variant p { display:none; }
.condition-card.has-multiple-variants .tracker-variant .species-badge { margin:0; white-space:nowrap; }
@media (max-width:1100px) { .family-grid-more { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:980px) { .family-grid-primary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .family-grid-more { grid-template-columns:repeat(2,minmax(0,1fr)); } .family-more { min-height:148px; } }
@media (max-width:620px) { .family-grid-primary,.family-grid-more { grid-template-columns:1fr; } .family-more { min-height:132px; } .more-family { padding:18px; } .condition-card.has-multiple-variants .tracker-variant { padding:12px; } }