/* ============================================================

   File: tools.css

   Purpose: Tools directory page layout.

   Project: DevZTools

   ============================================================ */



.tools-directory {

    display: flex;

    flex-direction: column;

    gap: var(--space-section);

    padding-block-end: var(--space-8);

}



.tools-directory__heading {

    margin: 0 0 var(--space-4);

    scroll-margin-block-start: calc(var(--space-8) + var(--space-5));

    color: var(--color-text-primary);

    font-size: var(--font-size-xl);

    font-weight: var(--font-weight-semibold);

    line-height: var(--line-height-tight);

}



.tools-directory__grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}



@container app-content (max-width: 40rem) {

    .tools-directory__grid {

        grid-template-columns: 1fr;

    }

}



/* Two columns maximum — persistent sidebar + shell cap keep content below a practical 3-col width. */
@container app-content (min-width: 40.01rem) {
    .tools-directory__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



.tools-directory__empty {

    margin: 0;

    padding: var(--space-5);

    border: var(--border-width-thin) solid var(--color-border);

    border-radius: var(--radius-panel);

    background-color: var(--color-background-elevated);

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

}