/* =========================================================
   RADIUS · COMPONENTS PREVIEW
   assets/css/pages/radius-builder/preview/components-preview.css
   =========================================================
   "Components" tab (default). The component samples carry their
   own corner binding + demonstrative skin inline (components-
   preview.js); this file owns the responsive tile grid and the
   tile label chrome, using website design-system tokens.
   ========================================================= */

.rd-cp {
    /* display / padding set inline; columns + rhythm are responsive here */
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-6);
    align-content: start;
}

/* Card framing — groups each specimen into a distinct unit, kept lighter than
   the outer preview-system card (border-primary + shadow-md) so the two
   don't read as a stacked "double card". */
.rd-cp-tile {
    padding: var(--space-4);
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* Title — primary emphasis; this is what the user scans first. */
.rd-cp-tile-label {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

/* The strongest radius demonstrators get a touch more title weight. */
.rd-cp-tile-label--priority {
    font-weight: var(--font-extra-bold);
}

/* Token value — secondary/meta, set below the specimen so it never competes
   with the title or the shape for attention. */
.rd-cp-tile-foot {
    margin-top: -2px;
}

.rd-cp-tile-value {
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: var(--font-semi-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: var(--surface-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: 9999px;
    padding: 0.15rem 0.55rem;
}

/* Mobile device toggle → single column. */
.rd-preview-root--mobile .rd-cp {
    grid-template-columns: 1fr;
}