/* Public and member card tokens. The active theme supplies its palette;
   a theme can also override the semantic card tokens on its own scope. */
:root {
    --site-card-background: var(--color-white, #fff);
    --site-card-radius: var(--radius-sm, 0.25rem);
    --site-card-border-width: 1px;
    --site-card-border-style: solid;
    --site-card-border-style-empty: dashed;
    --site-card-border-color: var(--color-ui-300, #cbd5e1);
    --site-card-border-hover: var(--color-primary-400, #818cf8);
    --site-card-border-empty: var(--color-slate-300, #cbd5e1);
    --site-card-border-highlight: var(--color-primary-300, #a5b4fc);
    --site-card-border-highlight-hover: var(--color-primary-500, #6366f1);
    --site-card-shadow: none;
    --site-card-shadow-hover: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
}

.site-card {
    --_site-card-state-border-style: var(--site-card-border-style);
    --_site-card-state-border-color: var(--site-card-border-color);

    background-color: var(--site-card-background);
    border-width:
        var(--site-card-border-top-width, var(--site-card-border-width))
        var(--site-card-border-right-width, var(--site-card-border-width))
        var(--site-card-border-bottom-width, var(--site-card-border-width))
        var(--site-card-border-left-width, var(--site-card-border-width));
    border-style:
        var(--site-card-border-top-style, var(--_site-card-state-border-style))
        var(--site-card-border-right-style, var(--_site-card-state-border-style))
        var(--site-card-border-bottom-style, var(--_site-card-state-border-style))
        var(--site-card-border-left-style, var(--_site-card-state-border-style));
    border-color:
        var(--site-card-border-top-color, var(--_site-card-state-border-color))
        var(--site-card-border-right-color, var(--_site-card-state-border-color))
        var(--site-card-border-bottom-color, var(--_site-card-state-border-color))
        var(--site-card-border-left-color, var(--_site-card-state-border-color));
    border-radius: var(--site-card-radius);
    box-shadow: var(--site-card-shadow);
}

.site-card--empty {
    background-color: transparent;
    --_site-card-state-border-color: var(--site-card-border-empty);
    --_site-card-state-border-style: var(--site-card-border-style-empty);
}

.site-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1rem;
    text-align: center;
}

.site-card-placeholder__icon {
    margin-block-end: 1rem;
}

.site-card-placeholder--large {
    min-block-size: calc(24rem
        - var(--site-card-border-top-width, var(--site-card-border-width))
        - var(--site-card-border-bottom-width, var(--site-card-border-width)));
}

.site-card--highlighted {
    --_site-card-state-border-color: var(--site-card-border-highlight);
}

.site-home-card__icon {
    color: var(--color-accent);
}

.site-card-link--accent-hover {
    --site-card-border-hover: var(--color-accent);
}

.site-card--interactive:is(:hover, :focus-within),
.site-card-link:is(:hover, :focus-visible) > .site-card {
    box-shadow: var(--site-card-shadow-hover);
}

.site-card-link:is(:hover, :focus-visible) > .site-card {
    --_site-card-state-border-color: var(--site-card-border-hover);
}

.site-card-link:is(:hover, :focus-visible) > .site-card--highlighted {
    --_site-card-state-border-color: var(--site-card-border-highlight-hover);
}

@media (prefers-reduced-motion: no-preference) {
    .site-card-link > .site-card {
        transition: border-color 150ms, box-shadow 150ms;
    }
}

.site-lead-card__highlight {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
    .site-lead-card__body {
        display: flex;
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    .site-lead-card__text {
        flex: 1 1 18rem;
    }

    .site-lead-card__highlights {
        display: flex;
        flex-wrap: wrap;
        row-gap: 0.75rem;
        max-inline-size: 100%;
        margin-inline-start: auto;
    }

    .site-lead-card__highlight {
        display: flex;
        /* Two columns of a 72rem, 12-column grid with 2rem gaps, rounded up. */
        min-inline-size: 10.375rem;
        max-inline-size: 100%;
        padding-inline-end: 1rem;
        border-inline-start: var(--site-card-border-width) solid var(--site-card-border-color);
    }
}

.site-data-grid,
.site-data-grid > div {
    border-color: var(--color-line);
}