/*
 * The help centre page inside the client panel — layout only.
 *
 * Everything with an appearance on that page is a Filament component: the
 * search field, the sections, the badges, the links, the button. What is left
 * here is the arrangement between them, which components cannot express: a grid
 * of sections, a list with gaps, and one muted line for a search snippet.
 *
 * It has to live in a file because this panel serves Filament's pre-compiled
 * stylesheet, which carries the `fi-` component classes and no utility classes
 * at all — so `class="flex gap-2"` written in a Blade view here is inert markup.
 * That is the same reason contact.css and wallet.css exist.
 *
 * Registered on the client panel in ClientPanelProvider:
 *
 *     Css::make('help', resource_path('css/help.css'))
 *
 * which `php artisan filament:assets` copies to public/css/app/help.css.
 *
 * The public documentation site shares none of this: it is built on Bootstrap
 * and renders without Filament on the page at all.
 *
 * Namespace `hc-`.
 */

.hc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.5rem;
}

.hc-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hc-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.hc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.hc-snippet {
    color: var(--gray-500);
    font-size: var(--text-sm, 0.875rem);
}

.dark .hc-snippet {
    color: var(--gray-400);
}

/* The words the search matched, marked by ArticleSearch. */
.hc-snippet mark {
    padding: 0 0.125rem;
    border-radius: 0.1875rem;
    background-color: var(--warning-100, #fef0c7);
    color: var(--warning-900, #422e00);
}

.dark .hc-snippet mark {
    background-color: var(--warning-900, #4a3a05);
    color: var(--warning-100, #fde68a);
}