/* Directory layout styles for homepage and category pages */

/* Scroll margin for fixed header */
[id]{scroll-margin-top:calc(var(--header-height) + 16px)}

.section-header{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-4)}
.section-header h2{margin:0;font-size:1.25rem}
.index-total,.tool-count{font-size:13px;color:var(--text-secondary);font-weight:400}

/* Category cards */
.category-card{text-align:center;padding:var(--space-4) var(--space-3)}
.category-card .category-count{display:block;font-size:12px;color:var(--text-secondary);margin-top:6px;font-weight:600}

/* Family sections */
.family-section{margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-color)}
.family-section:last-child{border-bottom:none}
.family-header{margin-bottom:var(--space-3)}
.family-header h2{font-size:1rem;margin:0 0 2px;font-weight:700}
.family-description{font-size:13px;color:var(--text-secondary);display:block}
.family-count{font-size:11px;color:var(--text-secondary);font-weight:600}

/* Quick links */
.family-quick-links,.card-quick-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px}
.family-quick-links{border-top:1px dashed var(--border-color)}
.ql-label{font-size:11px;color:var(--text-secondary);font-weight:600;line-height:24px}
.quick-link{display:inline-block;padding:2px 10px;font-size:11px;font-weight:500;border:1px solid var(--border-color);border-radius:12px;color:var(--text-secondary);text-decoration:none;transition:all .15s}
.quick-link:hover{border-color:var(--color-primary);color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 5%,transparent)}
.card-quick-links{padding-top:6px;gap:4px}
.card-quick-links .quick-link{font-size:10px;padding:1px 7px}

/* Hub cards */
.hub-card{border-left:3px solid var(--color-primary)}
.section-index .hub-card{border-left:1px solid var(--border-color)}

/* Type badge */
.type-badge{display:inline-block;padding:1px 6px;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:3px;background:var(--bg-secondary);color:var(--text-secondary);margin-left:6px;vertical-align:middle}

/* Capability badges */
.card-badges{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.capability-badge{display:inline-block;padding:1px 6px;font-size:9px;border-radius:3px;background:var(--bg-secondary);color:var(--text-secondary)}
.badge-live-data{background:#fef3c7;color:#92400e}
.badge-ai-local{background:#ede9fe;color:#5b21b6}
.badge-wasm{background:#ecfdf5;color:#065f46}
.badge-file{background:#eff6ff;color:#1e40af}
.badge-camera{background:#fdf4ff;color:#86198f}

/* Tabs */
.tab-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-color)}
.tab{padding:5px 14px;font-size:12px;font-weight:600;border:1px solid var(--border-color);border-radius:16px;background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:all .15s}
.tab:hover,.tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.tab-count{font-weight:400;opacity:.8}

/* Index categories */
.index-category{margin-bottom:var(--space-5)}
.index-category h3{font-size:1rem;margin:0 0 var(--space-3);display:flex;align-items:center;gap:8px}

/* Section featured */
.section-featured{margin-bottom:var(--space-6)}
.section-categories{margin-bottom:var(--space-8)}
.section-index{margin-bottom:var(--space-8)}

/* Filter input */
.filter-bar{margin-bottom:var(--space-4)}
.filter-input{width:100%;max-width:400px;padding:8px 14px;font-size:13px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-primary)}

/* Related categories */
.related-categories{padding-top:var(--space-6);border-top:1px solid var(--border-color)}
.related-categories h2{font-size:1rem;margin-bottom:var(--space-3)}

/* Grid adjustments */
.grid-cols-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-3)}

/* Collapse / expand */
.category-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:var(--space-3);padding:5px 14px;font-size:12px;font-weight:600;border:1px solid var(--border-color);border-radius:16px;background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:all .15s}
.category-toggle:hover{border-color:var(--color-primary);color:var(--color-primary)}
.index-category .grid{position:relative}
.index-category .grid.collapsed .card.overflow-hidden{display:none !important}

/* Family sub-groups in All Tools */
.family-group{margin-bottom:var(--space-3)}
.family-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin-bottom:var(--space-2);padding-left:2px}

/* Denser cards in All Tools section */
.section-index .card{padding:var(--space-3)}
.section-index .card-title{font-size:13px}
.section-index .card-description{font-size:12px;line-height:1.4}

@media(max-width:640px){
    .tab-bar{gap:3px}
    .tab{padding:4px 10px;font-size:11px}
    .family-quick-links{gap:4px}
    .section-index .grid{grid-template-columns:1fr !important}
}