@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/content-blocks.css

@@ -1,944 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Content Blocks
- *
- *  Responsibilities:
- *    - Define the structural building blocks of the UI: cards, media blocks,
- *      list groups, callouts, empty states, stats, metric titles, tags/chips/badges,
- *      avatars, features, processes, highlights, fact blocks, and content blocks
- *    - Provide consistent, token-driven spacing, radii, borders, shadows, and
- *      interaction patterns across all content surfaces
- *    - Expose semantic and interactive variants for blocks, tags, callouts, and
- *      process steps
- *    - Enable layout-neutral composition while supporting grid, stack, inline,
- *      horizontal, and compact patterns
- *
- *  System Notes:
- *    - Pure CSS; no behavioural assumptions or JavaScript dependencies
- *    - Fully theme-driven: all tokens derive from primitives + active theme
- *    - All interactive states use shared VDS focus, hover, and selected patterns
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. CONTENT BLOCK TOKEN DEFINITIONS
---------------------------------------------------------- */
-
-[data-vds-content-block],
-.vds-content-block {
-    --content-block-tag-size-sm: var(--space-4);
-    --content-block-tag-size-md: var(--space-5);
-    --content-block-tag-size-lg: var(--space-6);
-    --content-block-component-disabled--opacity: 0.3;
-
-
-    --content-block-component-pad-sm: var(--space-3);
-    --content-block-component-pad-md: var(--space-6);
-    --content-block-component-pad-lg: var(--space-8);
-
-    --content-block-component-border-sm: var(--border-width);
-
-    --content-block-card-min-width: 16.25rem;
-
-    --content-block-card-gap: var(--space-4);
-    --content-block-card-pad: var(--space-8);
-    --content-block-card-pad-mobile: var(--space-6);
-
-    --content-block-fact-pad: var(--space-10);
-
-    --content-block-process-gap: var(--space-10);
-    --content-block-process-step-min-width: 15rem;
-
-    --content-block-media-gap: var(--space-6);
-
-    --content-block-empty-pad-vertical: var(--space-14);
-    --content-block-empty-pad-horizontal: var(--space-6);
-
-    --content-block-empty-gap: var(--space-4);
-
-    --content-block-highlight-border-width: var(--border-width-strong);
-    --content-block-highlight-pad: var(--space-6);
-}
-
-/* ---------------------------------------------------------
-   2. GENERIC INTERACTIVE / DISABLED
---------------------------------------------------------- */
-
-.interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);
-}
-
-.interactive:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-border-strong);
-}
-
-.interactive:active {
-    background-color: var(--color-surface-subtle);
-}
-
-.interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.is-disabled {
-    opacity: 0.5;
-    opacity: var(--content-block-component-disabled--opacity, 0.5);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-/* ---------------------------------------------------------
-   3. CARD
---------------------------------------------------------- */
-
-.card {
-    background-color: var(--color-surface);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    border-radius: var(--radius-md);
-    padding: var(--content-block-card-pad);
-    display: flex;
-    flex-direction: column;
-    gap: var(--content-block-card-gap);
-    box-shadow: var(--shadow-1);
-    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
-}
-
-.card--soft {
-    background-color: var(--color-surface-subtle);
-}
-
-.card--muted {
-    background-color: var(--color-muted-bg);
-}
-
-.card--tone-accent {
-    background-color: var(--color-accent-soft);
-}
-
-@media (max-width: 640px) {
-    .card {
-        padding: var(--content-block-card-pad-mobile);
-    }
-}
-
-.card--flat {
-    box-shadow: none;
-}
-
-.card--raised {
-    box-shadow: var(--shadow-2);
-}
-
-.card--interactive {
-    cursor: pointer;
-}
-
-.card--interactive:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-border-strong);
-    box-shadow: var(--shadow-2);
-}
-
-.card--interactive:active {
-    background-color: var(--color-surface-subtle);
-}
-
-.card--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.card--selected {
-    border-color: var(--color-accent);
-    box-shadow: var(--shadow-2);
-}
-
-.card--disabled {
-    opacity: 0.5;
-    opacity: var(--content-block-component-disabled--opacity, 0.5);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.card__header,
-.card__body {
-    width: 100%;
-}
-
-.card__footer {
-    margin-top: var(--component-gap-lg);
-    display: flex;
-    gap: var(--component-gap-md);
-    justify-content: flex-end;
-}
-
-.card__section-stack,
-.card__body-stack,
-.card__header-stack {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-md);
-}
-
-.card__section-inline,
-.card__body-inline,
-.card__footer-inline {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--component-gap-md);
-    align-items: flex-start;
-}
-
-/* ---------------------------------------------------------
-   4. CARD GRID
---------------------------------------------------------- */
-
-.card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--content-block-card-min-width), 1fr));
-    grid-gap: var(--component-gap-lg);
-    gap: var(--component-gap-lg);
-}
-
-.card-grid--compact {
-    gap: var(--component-gap-md);
-}
-
-.card-grid--tight {
-    gap: var(--component-gap-xs);
-}
-
-.card-grid--wide {
-    gap: var(--component-gap-xl);
-}
-
-/* ---------------------------------------------------------
-   5. MEDIA BLOCK
---------------------------------------------------------- */
-
-.media {
-    display: flex;
-    align-items: center;
-    gap: var(--content-block-media-gap);
-}
-
-.media--stack {
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.media--horizontal {
-    flex-direction: row;
-    align-items: center;
-}
-
-.media--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal);
-}
-
-.media--interactive:hover {
-    background-color: var(--color-surface-hover);
-}
-
-@media (max-width: 768px) {
-    .media {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-}
-
-.media__img,
-.media__icon {
-    width: var(--icon-container-lg);
-    height: var(--icon-container-lg);
-    flex-shrink: 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.media__img img,
-.media__icon svg {
-    width: 100%;
-    height: 100%;
-    -o-object-fit: contain;
-       object-fit: contain;
-    border-radius: var(--radius-sm);
-}
-
-.media__icon .icon {
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-
-.media__body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-xs);
-}
-
-.media__meta {
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   6. LIST GROUP
---------------------------------------------------------- */
-
-.list-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-xs);
-}
-
-.list-group__item {
-    display: flex;
-    gap: var(--component-gap-md);
-    padding: var(--component-gap-md) 0;
-    border-bottom: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-}
-
-.list-group__item:last-child {
-    border-bottom: none;
-}
-
-.list-group--borderless .list-group__item {
-    border-bottom: none;
-}
-
-.list-group--tight .list-group__item {
-    padding: var(--component-gap-xs) 0;
-}
-
-.list-group__item--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal);
-}
-
-.list-group__item--interactive:hover {
-    background-color: var(--color-surface-hover);
-}
-
-.list-group__item--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.list-group__item--selected {
-    background-color: var(--accent-soft-surface, var(--color-accent-soft));
-    border-left-color: var(--accent-soft-border, var(--color-accent));
-    box-shadow: 0 0 0 1px transparent;
-    box-shadow: 0 0 0 1px var(--accent-soft-shadow, transparent);
-    color: var(--accent-soft-on, var(--color-on-accent));
-}
-
-.list-group__item--disabled {
-    opacity: var(--content-block-component-disabled--opacity);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-/* ---------------------------------------------------------
-   7. CALLOUTS (Semantic Variants)
---------------------------------------------------------- */
-
-.callout {
-    border-radius: var(--radius-md);
-    padding: var(--content-block-component-pad-md);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    background-color: var(--color-muted-bg);
-}
-
-.callout--compact {
-    padding: var(--content-block-component-pad-sm);
-}
-
-.callout--outline {
-    background-color: var(--color-surface);
-    border-color: var(--color-border-strong);
-}
-
-.callout--minimal {
-    background-color: transparent;
-    border-color: transparent;
-}
-
-.callout__title {
-    font-size: var(--text-sm);
-    font-weight: 600;
-}
-
-.callout__body {
-    margin-top: var(--component-gap-xs);
-}
-
-.callout__icon {
-    margin-bottom: var(--component-gap-xs);
-}
-
-.callout--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal);
-}
-
-.callout--interactive:hover {
-    background: color-mix(in srgb, currentColor 10%, transparent);
-}
-
-.callout--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.semantic-info {
-    background-color: var(--semantic-info-bg);
-    border-color: var(--semantic-info-border);
-    color: var(--semantic-info-text);
-}
-
-.semantic-success {
-    background-color: var(--semantic-success-bg);
-    border-color: var(--semantic-success-border);
-    color: var(--semantic-success-text);
-}
-
-.semantic-warning {
-    background-color: var(--semantic-warning-bg);
-    border-color: var(--semantic-warning-border);
-    color: var(--semantic-warning-text);
-}
-
-.semantic-danger {
-    background-color: var(--semantic-danger-bg);
-    border-color: var(--semantic-danger-border);
-    color: var(--semantic-danger-text);
-}
-
-/* ---------------------------------------------------------
-   8. EMPTY STATE
---------------------------------------------------------- */
-
-.empty {
-    text-align: center;
-    background-color: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    padding: var(--content-block-empty-pad-vertical) var(--content-block-empty-pad-horizontal);
-}
-
-.empty--compact {
-    padding: var(--content-block-component-pad-md);
-}
-
-.empty--inline {
-    display: inline-flex;
-    align-items: center;
-    text-align: left;
-}
-
-.empty__icon {
-    width: var(--space-16);
-    height: var(--space-16);
-    margin: 0 auto var(--content-block-empty-gap);
-    stroke: var(--color-text-muted);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.empty--inline .empty__icon {
-    margin: 0 var(--component-gap-md) 0 0;
-}
-
-.empty__icon .icon {
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-
-.empty__actions {
-    margin-top: var(--component-gap-lg);
-    display: flex;
-    justify-content: center;
-    gap: var(--component-gap-md);
-}
-
-/* ---------------------------------------------------------
-   9. STATS BLOCK
---------------------------------------------------------- */
-
-.stats {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--component-gap-xl);
-}
-
-@media (max-width: 768px) {
-    .stats {
-        gap: var(--component-gap-lg);
-    }
-}
-
-.stats__item {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-xs);
-}
-
-.stats--center .stats__item {
-    align-items: center;
-}
-
-.stats__value {
-    font-size: var(--text-lg);
-    font-weight: 600;
-    color: var(--color-text);
-}
-
-.stats__label {
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   10. METRIC TITLE
---------------------------------------------------------- */
-
-.metric-title {
-    font-size: var(--text-xs);
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    font-weight: 600;
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   11. TAGS / CHIPS / BADGES + INTERACTIVE
---------------------------------------------------------- */
-
-.tag,
-.chip,
-.badge {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--component-gap-xs);
-    padding: var(--component-gap-sm) var(--component-gap-md);
-    height: var(--content-block-tag-size-md);
-    font-size: var(--text-xs);
-    border-radius: 9999px;
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    background-color: var(--color-surface);
-    color: var(--color-text);
-}
-
-.tag--sm,
-.chip--sm,
-.badge--sm {
-    height: var(--content-block-tag-size-sm);
-}
-
-.tag--lg,
-.chip--lg,
-.badge--lg {
-    height: var(--content-block-tag-size-lg);
-}
-
-.tag--soft,
-.chip--soft,
-.badge--soft {
-    background-color: var(--color-surface-subtle);
-}
-
-.tag--outline,
-.chip--outline,
-.badge--outline {
-    background-color: transparent;
-    border-color: var(--color-border-strong);
-}
-
-.tag--interactive,
-.chip--interactive,
-.badge--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
-}
-
-.tag--interactive:hover,
-.chip--interactive:hover,
-.badge--interactive:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-border-strong);
-}
-
-.tag--interactive:focus-visible,
-.chip--interactive:focus-visible,
-.badge--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.tag--disabled,
-.chip--disabled,
-.badge--disabled {
-    opacity: 0.5;
-    opacity: var(--content-block-component-disabled--opacity, 0.5);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.tag.semantic-info,
-.chip.semantic-info,
-.badge.semantic-info {
-    background-color: var(--semantic-info-bg);
-    color: var(--semantic-info-text);
-}
-
-.tag.semantic-warning,
-.chip.semantic-warning,
-.badge.semantic-warning {
-    background-color: var(--semantic-warning-bg);
-    color: var(--semantic-warning-text);
-}
-
-.tag.semantic-success,
-.chip.semantic-success,
-.badge.semantic-success {
-    background-color: var(--semantic-success-bg);
-    color: var(--semantic-success-text);
-}
-
-.tag.semantic-danger,
-.chip.semantic-danger,
-.badge.semantic-danger {
-    background-color: var(--semantic-danger-bg);
-    color: var(--semantic-danger-text);
-}
-
-/* ---------------------------------------------------------
-   12. AVATAR + STATUS
---------------------------------------------------------- */
-
-.avatar {
-    position: relative;
-    width: var(--avatar-size-md);
-    height: var(--avatar-size-md);
-    border-radius: 50%;
-    overflow: hidden;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--color-muted-bg);
-}
-
-.avatar--sm {
-    width: var(--avatar-size-sm);
-    height: var(--avatar-size-sm);
-}
-
-.avatar--lg {
-    width: var(--avatar-size-lg);
-    height: var(--avatar-size-lg);
-}
-
-.avatar--status::after {
-    content: "";
-    position: absolute;
-    width: var(--avatar-status-size);
-    height: var(--avatar-status-size);
-    border-radius: 50%;
-    background-color: var(--color-success);
-    border: var(--border-width) solid var(--color-surface);
-    bottom: 0;
-    right: 0;
-}
-
-/* ---------------------------------------------------------
-   13. FEATURE BLOCK
---------------------------------------------------------- */
-
-.feature {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-xs);
-}
-
-.feature--horizontal {
-    flex-direction: row;
-    align-items: center;
-}
-
-.feature__icon {
-    width: var(--icon-container-lg);
-    height: var(--icon-container-lg);
-    flex-shrink: 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.feature__icon .icon {
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-
-.feature--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal);
-}
-
-.feature--interactive:hover {
-    background-color: var(--color-surface-hover);
-}
-
-.feature--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-@media (max-width: 640px) {
-    .feature--horizontal {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-}
-
-/* ---------------------------------------------------------
-   14. PROCESS BLOCK
---------------------------------------------------------- */
-
-.process {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--content-block-process-step-min-width), 1fr));
-    grid-gap: var(--content-block-process-gap);
-    gap: var(--content-block-process-gap);
-}
-
-@media (max-width: 768px) {
-    .process {
-        gap: var(--component-gap-lg);
-    }
-}
-
-.process__step {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-md);
-    padding: var(--content-block-component-pad-md);
-    border-radius: var(--radius-md);
-    background-color: var(--color-surface);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    color: var(--color-text);
-}
-
-.process__step--active {
-    background-color: var(--accent-soft-surface);
-    border-color: var(--accent-soft-border);
-    color: var(--accent-soft-on);
-}
-
-.process__step--complete {
-    background-color: var(--success-soft-surface);
-    border-color: var(--success-soft-border);
-    color: var(--success-soft-on);
-}
-
-.process__step--disabled {
-    opacity: var(--content-block-component-disabled--opacity);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-/* ---------------------------------------------------------
-   15. HIGHLIGHT BLOCK
---------------------------------------------------------- */
-
-.highlight {
-    background-color: var(--color-surface-subtle);
-    border-left: var(--content-block-highlight-border-width) solid var(--color-accent);
-    padding: var(--content-block-highlight-pad);
-    border-radius: var(--radius-sm);
-}
-
-.highlight--compact {
-    padding: var(--content-block-component-pad-sm);
-}
-
-.highlight--info {
-    border-color: var(--semantic-info-border);
-    background-color: var(--semantic-info-bg);
-}
-
-.highlight--success {
-    border-color: var(--semantic-success-border);
-    background-color: var(--semantic-success-bg);
-}
-
-.highlight--warning {
-    border-color: var(--semantic-warning-border);
-    background-color: var(--semantic-warning-bg);
-}
-
-.highlight--danger {
-    border-color: var(--semantic-danger-border);
-    background-color: var(--semantic-danger-bg);
-}
-
-/* ---------------------------------------------------------
-   16. FACT BLOCK
---------------------------------------------------------- */
-
-.fact {
-    text-align: center;
-    background-color: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    padding: var(--content-block-fact-pad);
-}
-
-.fact--horizontal {
-    text-align: left;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--component-gap-lg);
-}
-
-.fact--compact {
-    padding: var(--content-block-component-pad-md);
-}
-
-.fact--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal);
-}
-
-.fact--interactive:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-border-strong);
-}
-
-.fact--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.fact--disabled {
-    opacity: 0.5;
-    opacity: var(--content-block-component-disabled--opacity, 0.5);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-/* ---------------------------------------------------------
-   17. CONTENT BLOCK (NEW STRUCTURAL BLOCK)
-   --------------------------------------------------------- */
-
-.content-block {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-md);
-    width: 100%;
-}
-
-.content-block--surface {
-    background-color: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    padding: var(--content-block-component-pad-lg);
-    box-shadow: var(--shadow-1);
-}
-
-.content-block--inset {
-    background-color: var(--color-surface-subtle);
-    border-radius: var(--radius-md);
-    padding: var(--content-block-component-pad-md);
-}
-
-.content-block--compact {
-    gap: var(--component-gap-xs);
-}
-
-.content-block--surface.content-block--compact {
-    padding: var(--content-block-component-pad-md);
-}
-
-.content-block--inset.content-block--compact {
-    padding: var(--content-block-component-pad-sm);
-}
-
-.content-block--bordered {
-    border: var(--content-block-component-border-sm) solid var(--color-border-strong);
-}
-
-/* ---------------------------------------------------------
-   17.1 CONTENT BLOCK - REGIONS
-   --------------------------------------------------------- */
-
-.content-block__header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-xs);
-}
-
-.content-block__body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-md);
-}
-
-.content-block__media {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.content-block__media img,
-.content-block__media svg,
-.content-block__media picture {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--radius-sm);
-}
-
-.content-block__footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--component-gap-md);
-    margin-top: var(--component-gap-lg);
-}
-
-/* ---------------------------------------------------------
-   17.2 INTERACTIVE STATE (optional)
-   --------------------------------------------------------- */
-
-.content-block--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
-}
-
-.content-block--interactive:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-border-strong);
-    box-shadow: var(--shadow-2);
-}
-
-.content-block--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.content-block--disabled {
-    opacity: 0.5;
-    opacity: var(--content-block-component-disabled--opacity, 0.5);
-    pointer-events: none;
-    cursor: not-allowed;
-}
+.vds-content-block,[data-vds-content-block]{--content-block-tag-size-sm:var(--space-4);--content-block-tag-size-md:var(--space-5);--content-block-tag-size-lg:var(--space-6);--content-block-component-disabled--opacity:0.3;--content-block-component-pad-sm:var(--space-3);--content-block-component-pad-md:var(--space-6);--content-block-component-pad-lg:var(--space-8);--content-block-component-border-sm:var(--border-width);--content-block-card-min-width:16.25rem;--content-block-card-gap:var(--space-4);--content-block-card-pad:var(--space-8);--content-block-card-pad-mobile:var(--space-6);--content-block-fact-pad:var(--space-10);--content-block-process-gap:var(--space-10);--content-block-process-step-min-width:15rem;--content-block-media-gap:var(--space-6);--content-block-empty-pad-vertical:var(--space-14);--content-block-empty-pad-horizontal:var(--space-6);--content-block-empty-gap:var(--space-4);--content-block-highlight-border-width:var(--border-width-strong);--content-block-highlight-pad:var(--space-6)}.interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal),color var(--transition-normal)}.interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.interactive:active{background-color:var(--color-surface-subtle)}.interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.is-disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.card{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:var(--content-block-card-gap);padding:var(--content-block-card-pad);transition:background-color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}.card--soft{background-color:var(--color-surface-subtle)}.card--muted{background-color:var(--color-muted-bg)}.card--tone-accent{background-color:var(--color-accent-soft)}@media (max-width:640px){.card{padding:var(--content-block-card-pad-mobile)}}.card--flat{box-shadow:none}.card--raised{box-shadow:var(--shadow-2)}.card--interactive{cursor:pointer}.card--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--shadow-2)}.card--interactive:active{background-color:var(--color-surface-subtle)}.card--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.card--selected{border-color:var(--color-accent);box-shadow:var(--shadow-2)}.card--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.card__body,.card__header{width:100%}.card__footer{display:flex;gap:var(--component-gap-md);justify-content:flex-end;margin-top:var(--component-gap-lg)}.card__body-stack,.card__header-stack,.card__section-stack{display:flex;flex-direction:column;gap:var(--component-gap-md)}.card__body-inline,.card__footer-inline,.card__section-inline{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--component-gap-md)}.card-grid{grid-gap:var(--component-gap-lg);display:grid;gap:var(--component-gap-lg);grid-template-columns:repeat(auto-fit,minmax(var(--content-block-card-min-width),1fr))}.card-grid--compact{gap:var(--component-gap-md)}.card-grid--tight{gap:var(--component-gap-xs)}.card-grid--wide{gap:var(--component-gap-xl)}.media{align-items:center;display:flex;gap:var(--content-block-media-gap)}.media--stack{align-items:flex-start;flex-direction:column}.media--horizontal{align-items:center;flex-direction:row}.media--interactive{cursor:pointer;transition:background-color var(--transition-normal)}.media--interactive:hover{background-color:var(--color-surface-hover)}@media (max-width:768px){.media{align-items:flex-start;flex-direction:column}}.media__icon,.media__img{align-items:center;display:flex;flex-shrink:0;height:var(--icon-container-lg);justify-content:center;width:var(--icon-container-lg)}.media__icon svg,.media__img img{border-radius:var(--radius-sm);height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.media__icon .icon{display:block;height:100%;width:100%}.media__body{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.media__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.list-group{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.list-group__item{border-bottom:var(--content-block-component-border-sm) solid var(--color-border-subtle);display:flex;gap:var(--component-gap-md);padding:var(--component-gap-md) 0}.list-group--borderless .list-group__item,.list-group__item:last-child{border-bottom:none}.list-group--tight .list-group__item{padding:var(--component-gap-xs) 0}.list-group__item--interactive{cursor:pointer;transition:background-color var(--transition-normal)}.list-group__item--interactive:hover{background-color:var(--color-surface-hover)}.list-group__item--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.list-group__item--selected{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-left-color:var(--accent-soft-border,var(--color-accent));box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px var(--accent-soft-shadow,transparent);color:var(--accent-soft-on,var(--color-on-accent))}.list-group__item--disabled{cursor:not-allowed;opacity:var(--content-block-component-disabled--opacity);pointer-events:none}.callout{background-color:var(--color-muted-bg);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--content-block-component-pad-md)}.callout--compact{padding:var(--content-block-component-pad-sm)}.callout--outline{background-color:var(--color-surface);border-color:var(--color-border-strong)}.callout--minimal{background-color:transparent;border-color:transparent}.callout__title{font-size:var(--text-sm);font-weight:600}.callout__body{margin-top:var(--component-gap-xs)}.callout__icon{margin-bottom:var(--component-gap-xs)}.callout--interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal)}.callout--interactive:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.callout--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.semantic-info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.semantic-success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.semantic-warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.semantic-danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}.empty{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--content-block-empty-pad-vertical) var(--content-block-empty-pad-horizontal);text-align:center}.empty--compact{padding:var(--content-block-component-pad-md)}.empty--inline{align-items:center;display:inline-flex;text-align:left}.empty__icon{stroke:var(--color-text-muted);align-items:center;display:flex;height:var(--space-16);justify-content:center;margin:0 auto var(--content-block-empty-gap);width:var(--space-16)}.empty--inline .empty__icon{margin:0 var(--component-gap-md) 0 0}.empty__icon .icon{display:block;height:100%;width:100%}.empty__actions{display:flex;gap:var(--component-gap-md);justify-content:center;margin-top:var(--component-gap-lg)}.stats{display:flex;flex-wrap:wrap;gap:var(--component-gap-xl)}@media (max-width:768px){.stats{gap:var(--component-gap-lg)}}.stats__item{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.stats--center .stats__item{align-items:center}.stats__value{color:var(--color-text);font-size:var(--text-lg);font-weight:600}.metric-title,.stats__label{color:var(--color-text-muted);font-size:var(--text-xs)}.metric-title{font-weight:600;letter-spacing:.04em;text-transform:uppercase}.badge,.chip,.tag{align-items:center;background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:9999px;color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--component-gap-xs);height:var(--content-block-tag-size-md);padding:var(--component-gap-sm) var(--component-gap-md)}.badge--sm,.chip--sm,.tag--sm{height:var(--content-block-tag-size-sm)}.badge--lg,.chip--lg,.tag--lg{height:var(--content-block-tag-size-lg)}.badge--soft,.chip--soft,.tag--soft{background-color:var(--color-surface-subtle)}.badge--outline,.chip--outline,.tag--outline{background-color:transparent;border-color:var(--color-border-strong)}.badge--interactive,.chip--interactive,.tag--interactive{cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.badge--interactive:hover,.chip--interactive:hover,.tag--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.badge--interactive:focus-visible,.chip--interactive:focus-visible,.tag--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.badge--disabled,.chip--disabled,.tag--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.badge.semantic-info,.chip.semantic-info,.tag.semantic-info{background-color:var(--semantic-info-bg);color:var(--semantic-info-text)}.badge.semantic-warning,.chip.semantic-warning,.tag.semantic-warning{background-color:var(--semantic-warning-bg);color:var(--semantic-warning-text)}.badge.semantic-success,.chip.semantic-success,.tag.semantic-success{background-color:var(--semantic-success-bg);color:var(--semantic-success-text)}.badge.semantic-danger,.chip.semantic-danger,.tag.semantic-danger{background-color:var(--semantic-danger-bg);color:var(--semantic-danger-text)}.avatar{align-items:center;background-color:var(--color-muted-bg);border-radius:50%;display:inline-flex;height:var(--avatar-size-md);justify-content:center;overflow:hidden;position:relative;width:var(--avatar-size-md)}.avatar--sm{height:var(--avatar-size-sm);width:var(--avatar-size-sm)}.avatar--lg{height:var(--avatar-size-lg);width:var(--avatar-size-lg)}.avatar--status:after{background-color:var(--color-success);border:var(--border-width) solid var(--color-surface);border-radius:50%;bottom:0;content:"";height:var(--avatar-status-size);position:absolute;right:0;width:var(--avatar-status-size)}.feature{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.feature--horizontal{align-items:center;flex-direction:row}.feature__icon{align-items:center;display:flex;flex-shrink:0;height:var(--icon-container-lg);justify-content:center;width:var(--icon-container-lg)}.feature__icon .icon{display:block;height:100%;width:100%}.feature--interactive{cursor:pointer;transition:background-color var(--transition-normal)}.feature--interactive:hover{background-color:var(--color-surface-hover)}.feature--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}@media (max-width:640px){.feature--horizontal{align-items:flex-start;flex-direction:column}}.process{grid-gap:var(--content-block-process-gap);display:grid;gap:var(--content-block-process-gap);grid-template-columns:repeat(auto-fit,minmax(var(--content-block-process-step-min-width),1fr))}@media (max-width:768px){.process{gap:var(--component-gap-lg)}}.process__step{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:flex;flex-direction:column;gap:var(--component-gap-md);padding:var(--content-block-component-pad-md)}.process__step--active{background-color:var(--accent-soft-surface);border-color:var(--accent-soft-border);color:var(--accent-soft-on)}.process__step--complete{background-color:var(--success-soft-surface);border-color:var(--success-soft-border);color:var(--success-soft-on)}.process__step--disabled{cursor:not-allowed;opacity:var(--content-block-component-disabled--opacity);pointer-events:none}.highlight{background-color:var(--color-surface-subtle);border-left:var(--content-block-highlight-border-width) solid var(--color-accent);border-radius:var(--radius-sm);padding:var(--content-block-highlight-pad)}.highlight--compact{padding:var(--content-block-component-pad-sm)}.highlight--info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border)}.highlight--success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border)}.highlight--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border)}.highlight--danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border)}.fact{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--content-block-fact-pad);text-align:center}.fact--horizontal{align-items:center;display:flex;gap:var(--component-gap-lg);justify-content:center;text-align:left}.fact--compact{padding:var(--content-block-component-pad-md)}.fact--interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal)}.fact--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.fact--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.fact--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}.content-block{display:flex;flex-direction:column;gap:var(--component-gap-md);width:100%}.content-block--surface{background-color:var(--color-surface);border:var(--content-block-component-border-sm) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:var(--content-block-component-pad-lg)}.content-block--inset{background-color:var(--color-surface-subtle);border-radius:var(--radius-md);padding:var(--content-block-component-pad-md)}.content-block--compact{gap:var(--component-gap-xs)}.content-block--surface.content-block--compact{padding:var(--content-block-component-pad-md)}.content-block--inset.content-block--compact{padding:var(--content-block-component-pad-sm)}.content-block--bordered{border:var(--content-block-component-border-sm) solid var(--color-border-strong)}.content-block__header{display:flex;flex-direction:column;gap:var(--component-gap-xs)}.content-block__body{display:flex;flex-direction:column;gap:var(--component-gap-md)}.content-block__media{align-items:center;display:flex;justify-content:center;width:100%}.content-block__media img,.content-block__media picture,.content-block__media svg{border-radius:var(--radius-sm);height:auto;max-width:100%}.content-block__footer{display:flex;gap:var(--component-gap-md);justify-content:flex-end;margin-top:var(--component-gap-lg)}.content-block--interactive{cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}.content-block--interactive:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--shadow-2)}.content-block--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.content-block--disabled{cursor:not-allowed;opacity:.5;opacity:var(--content-block-component-disabled--opacity,.5);pointer-events:none}