/**
 * Card vertical rhythm — typography + spacing via shared --bbai-rhythm-* / --bbai-space-* tokens.
 * Scoped to body.bbai-dashboard so marketing/guide surfaces stay unchanged.
 *
 * @package BeepBeep_AI
 */

:root {
    --bbai-card-label-size: var(--bbai-admin-type-label, 12px);
    --bbai-card-label-weight: var(--bbai-admin-type-weight-semibold, 600);
    --bbai-card-label-leading: 1.3;
    --bbai-card-label-tracking: 0.08em;
    --bbai-card-label-margin-bottom: var(--bbai-rhythm-label-to-title, var(--bbai-space-2));
    --bbai-card-label-color: var(--bbai-admin-color-text-muted, #7b8aa0);

    --bbai-card-title-size: var(--bbai-admin-type-card-title, 20px);
    --bbai-card-title-weight: var(--bbai-admin-type-weight-semibold, 600);
    --bbai-card-title-leading: 1.2;
    --bbai-card-title-margin-bottom: var(--bbai-rhythm-title-to-description, var(--bbai-space-2));
    --bbai-card-title-tracking: -0.02em;
    --bbai-card-title-color: var(--bbai-admin-color-text, #0f172a);

    --bbai-card-description-size: var(--bbai-admin-type-body, 14px);
    --bbai-card-description-weight: var(--bbai-admin-type-weight-regular, 400);
    --bbai-card-description-leading: 1.5;
    --bbai-card-description-margin-bottom: var(--bbai-rhythm-description-to-content, var(--bbai-space-4));
    --bbai-card-description-max-width: 35rem;
    --bbai-card-description-color: var(--bbai-admin-color-text-secondary, #475569);

    --bbai-card-section-gap: var(--bbai-rhythm-section-gap, var(--bbai-space-4));
    --bbai-card-chips-margin-top: var(--bbai-space-3);

    --bbai-card-padding-x: var(--bbai-rhythm-card-padding-inline, var(--bbai-space-6));
    --bbai-card-padding-y-header: var(--bbai-rhythm-card-header-padding-y, var(--bbai-space-4));
    --bbai-card-padding-y-body: var(--bbai-rhythm-card-body-padding-y, var(--bbai-space-4));

    --bbai-card-meta-size: var(--bbai-admin-type-meta, 13px);
    --bbai-card-meta-weight: var(--bbai-admin-type-weight-medium, 500);
    --bbai-card-meta-leading: 1.35;
    --bbai-card-meta-color: var(--bbai-admin-color-text-muted, #64748b);

    --bbai-command-card-padding: var(--bbai-rhythm-card-padding, var(--bbai-space-6));
}

body.bbai-dashboard #bbai-dashboard-main {
    --bbai-command-card-padding: var(--bbai-rhythm-card-padding, var(--bbai-space-6));
}

/* ── Explicit rhythm classes (scoped so guide / marketing .bbai-card-title is untouched) ─ */

body.bbai-dashboard .bbai-ui-section-header__text > .bbai-card-label,
body.bbai-dashboard .bbai-command-card__header .bbai-card-label,
body.bbai-dashboard .bbai-library-workspace-card__head .bbai-card-label,
body.bbai-dashboard .bbai-analytics-trend-block__head .bbai-card-label {
    margin: 0 0 var(--bbai-card-label-margin-bottom);
    font-size: var(--bbai-card-label-size);
    font-weight: var(--bbai-card-label-weight);
    line-height: var(--bbai-card-label-leading);
    letter-spacing: var(--bbai-card-label-tracking);
    text-transform: uppercase;
    color: var(--bbai-card-label-color);
}

body.bbai-dashboard .bbai-ui-section-header__text > .bbai-card-title,
body.bbai-dashboard .bbai-command-card__header .bbai-card-title,
body.bbai-dashboard .bbai-library-workspace-card__head .bbai-card-title,
body.bbai-dashboard .bbai-analytics-trend-block__head .bbai-card-title,
body.bbai-dashboard .bbai-settings-plan-summary-card > .bbai-settings-card-title.bbai-card-title {
    margin: 0 0 var(--bbai-card-title-margin-bottom);
    font-size: var(--bbai-card-title-size);
    font-weight: var(--bbai-card-title-weight);
    line-height: var(--bbai-card-title-leading);
    letter-spacing: var(--bbai-card-title-tracking);
    color: var(--bbai-card-title-color);
}

body.bbai-dashboard .bbai-ui-section-header__text > .bbai-card-description,
body.bbai-dashboard .bbai-usage-activity-section__header .bbai-card-description,
body.bbai-dashboard .bbai-usage-insights-card__header .bbai-card-description {
    margin: 0 0 var(--bbai-card-description-margin-bottom);
    max-width: var(--bbai-card-description-max-width);
    font-size: var(--bbai-card-description-size);
    font-weight: var(--bbai-card-description-weight);
    line-height: var(--bbai-card-description-leading);
    color: var(--bbai-card-description-color);
}

body.bbai-dashboard .bbai-ui-section-header__text > .bbai-card-description:last-child,
body.bbai-dashboard .bbai-usage-activity-section__header .bbai-card-description:last-child,
body.bbai-dashboard .bbai-usage-insights-card__header .bbai-card-description:last-child {
    margin-bottom: 0;
}

body.bbai-dashboard .bbai-card-section {
    margin-top: var(--bbai-card-section-gap);
}

body.bbai-dashboard .bbai-card-section:first-child {
    margin-top: 0;
}

body.bbai-dashboard .bbai-command-card__meta-group .bbai-card-meta,
body.bbai-dashboard .bbai-section-header--split-end .bbai-card-meta {
    margin: 0;
    font-size: var(--bbai-card-meta-size);
    font-weight: var(--bbai-card-meta-weight);
    line-height: var(--bbai-card-meta-leading);
    color: var(--bbai-card-meta-color);
    font-variant-numeric: tabular-nums;
}

body.bbai-dashboard .bbai-card-body-stack {
    display: flex;
    flex-direction: column;
    gap: var(--bbai-rhythm-action-stack-gap, var(--bbai-space-2));
}

body.bbai-dashboard .bbai-card-body-stack > p {
    margin: 0;
    max-width: var(--bbai-card-description-max-width);
    font-size: var(--bbai-card-description-size);
    line-height: var(--bbai-card-description-leading);
    color: var(--bbai-card-description-color);
}

body.bbai-dashboard .bbai-card-chip-row,
body.bbai-dashboard ul.bbai-card-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bbai-rhythm-chip-gap, var(--bbai-space-2));
    margin: var(--bbai-card-chips-margin-top) 0 0;
    padding: 0;
    list-style: none;
}

/* ── Alias: legacy section classes inside product card headers ─────────── */

body.bbai-dashboard .bbai-section-header .bbai-section-label,
body.bbai-dashboard .bbai-ui-section-header__text > .bbai-section-label,
body.bbai-dashboard .bbai-command-card__header .bbai-section-label,
body.bbai-dashboard .bbai-library-workspace-card__head .bbai-section-label {
    margin: 0 0 var(--bbai-card-label-margin-bottom);
    font-size: var(--bbai-card-label-size);
    font-weight: var(--bbai-card-label-weight);
    line-height: var(--bbai-card-label-leading);
    letter-spacing: var(--bbai-card-label-tracking);
    text-transform: uppercase;
    color: var(--bbai-card-label-color);
}

body.bbai-dashboard .bbai-section-header .bbai-section-title,
body.bbai-dashboard .bbai-ui-section-header__text > .bbai-section-title,
body.bbai-dashboard .bbai-command-card__header .bbai-section-title,
body.bbai-dashboard .bbai-library-workspace-card__head .bbai-section-title {
    margin: 0 0 var(--bbai-card-title-margin-bottom);
    font-size: var(--bbai-card-title-size);
    font-weight: var(--bbai-card-title-weight);
    line-height: var(--bbai-card-title-leading);
    letter-spacing: var(--bbai-card-title-tracking);
    color: var(--bbai-card-title-color);
}

body.bbai-dashboard .bbai-section-header .bbai-section-title:last-child {
    margin-bottom: 0;
}

body.bbai-dashboard .bbai-analytics-trend-block__head .bbai-section-title:last-child {
    margin-bottom: 0;
}

body.bbai-dashboard #bbai-dashboard-main .bbai-command-card__header h2.bbai-section-title {
    margin: 0 0 var(--bbai-card-title-margin-bottom);
}

body.bbai-dashboard #bbai-dashboard-main .bbai-command-card__header h2.bbai-section-title:last-child {
    margin-bottom: 0;
}

body.bbai-dashboard .bbai-section-header .bbai-section-description,
body.bbai-dashboard .bbai-ui-section-header__text > .bbai-section-description {
    margin: 0 0 var(--bbai-card-description-margin-bottom);
    max-width: var(--bbai-card-description-max-width);
    font-size: var(--bbai-card-description-size);
    font-weight: var(--bbai-card-description-weight);
    line-height: var(--bbai-card-description-leading);
    color: var(--bbai-card-description-color);
}

body.bbai-dashboard .bbai-section-header .bbai-section-description:last-child {
    margin-bottom: 0;
}

body.bbai-dashboard .bbai-section-header--split-end .bbai-section-meta,
body.bbai-dashboard .bbai-section-header--split-end .bbai-command-card__meta.bbai-card-meta {
    font-size: var(--bbai-card-meta-size);
    font-weight: var(--bbai-card-meta-weight);
    line-height: var(--bbai-card-meta-leading);
    color: var(--bbai-card-meta-color);
}