/* Aventurische Namen: section overview, name lists, suggestion widget. */

/* Overview ---------------------------------------------------------------- */
.app-action-grid--dense {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    gap: var(--app-space-2);
}

.app-action-card--excursus {
    border-style: dashed;
}

/* Section page ------------------------------------------------------------ */
.app-names-toc__count {
    margin-inline-start: auto;
    color: var(--app-faint);
    font-size: var(--app-text-xs);
    font-variant-numeric: tabular-nums;
}

.app-names-toc .app-toc__item a {
    display: flex;
    align-items: center;
    gap: var(--app-space-2);
}

.app-names-list {
    scroll-margin-top: calc(var(--app-topbar-height) + 1rem);
}

.app-names-chips {
    gap: var(--app-space-1) var(--app-space-2);
}

.app-names-chip {
    padding: 0.1em 0.6em;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-pill);
    font-size: var(--app-text-sm);
    line-height: 1.7;
    background: var(--app-surface-raised);
}

.app-names-desc {
    display: grid;
    grid-template-columns: fit-content(40%) 1fr;
    gap: var(--app-space-2) var(--app-space-4);
    margin: 0;
}

.app-names-desc dt {
    font-weight: 600;
}

.app-names-desc dd {
    margin: 0;
    color: var(--app-muted);
}

.app-names-table td:first-child {
    width: 5rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .app-names-desc {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .app-names-desc dd {
        margin-bottom: var(--app-space-2);
    }
}

/* Generator ---------------------------------------------------------------- */
.app-names-result__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--app-font-display);
    font-size: var(--app-text-xl);
    line-height: 1.5;
}

.app-names-result__list li + li {
    border-top: 1px solid var(--app-parchment-edge);
}

/* Suggestion widget (forms) ------------------------------------------------ */
.app-name-suggest {
    margin: calc(-1 * var(--app-space-2)) 0 var(--app-space-4);
}

.app-name-suggest__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-2);
}

.app-name-suggest__controls select {
    width: auto;
    max-width: 100%;
}

.app-name-suggest__results {
    margin-top: var(--app-space-2);
}

.app-name-suggest__results:empty {
    display: none;
}

.app-name-suggest__chip {
    padding: 0.1em 0.7em;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-pill);
    color: var(--app-text);
    font: inherit;
    font-size: var(--app-text-sm);
    line-height: 1.7;
    background: var(--app-surface-raised);
    cursor: pointer;
}

.app-name-suggest__chip:hover,
.app-name-suggest__chip:focus-visible {
    border-color: var(--app-primary);
    color: var(--app-primary-soft);
}