/* Domma Showcase - demo styles from public/showcase/flags, by scripts/site-migrate/demo-styles.mjs:
 * only rules for classes the demos use. Do not edit - re-run the script, or move a rule
 * into a demo's own demo.css. */
.showcase-demo[data-demo^="showcase/flags/"] .flag-search-input {
            min-width: 220px;
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: .75rem;
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-cell {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .4rem;
            padding: .75rem .5rem;
            border-radius: 10px;
            background: var(--dm-surface-2, rgba(255, 255, 255, .03));
            border: 1px solid var(--dm-border, rgba(255, 255, 255, .07));
            cursor: pointer;
            transition: transform .12s ease, border-color .12s ease;
            text-align: center;
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-cell:hover {
            transform: translateY(-2px);
            border-color: var(--dm-primary, #6366f1);
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-cell svg {
            display: block;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-cell .flag-code {
            font-family: monospace;
            font-size: .72rem;
            text-transform: uppercase;
            opacity: .65;
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-cell .flag-name {
            font-size: .78rem;
            line-height: 1.1;
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-region-title {
            margin: 2rem 0 .75rem;
            font-size: 1.15rem;
            font-weight: 600;
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-shapes-demo {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            align-items: flex-end;
            padding: 1.5rem;
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-shapes-demo figure {
            margin: 0;
            text-align: center;
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-shapes-demo figcaption {
            margin-top: .5rem;
            font-size: .8rem;
            opacity: .7;
        }

        .showcase-demo[data-demo^="showcase/flags/"] .flag-no-results {
            text-align: center;
            padding: 3rem 1rem;
            opacity: .6;
        }