/* Each image is one reusable composition; the page owns its content-safe space. */
.ui-root .ui-art-composition { display: block; position: relative; flex: 0 0 auto; inline-size: var(--ui-art-size, 64px); aspect-ratio: 1; max-inline-size: 100%; pointer-events: none; user-select: none; }
.ui-root .ui-art-composition[hidden] { display: none; }
.ui-root .ui-art-composition__image { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; pointer-events: none; }
.ui-root .ui-art-composition--card-corner { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 1; }
.ui-root .ui-art-composition--footer-left, .ui-root .ui-art-composition--footer-right { position: absolute; inset-block-end: 0; z-index: 0; }
.ui-root .ui-art-composition--footer-left { inset-inline-start: 0; }
.ui-root .ui-art-composition--footer-right { inset-inline-end: 0; }
@media (forced-colors: active) { .ui-root .ui-art-composition { display: none; } }

/* Block-v1 has no generic corner selector or global overlay. Its native track
   reserves actual space; transparent image holes never become text slots. */
.ui-root .ui-block-art { position: relative; isolation: isolate; min-inline-size: 0; max-inline-size: 100%; }
.ui-root .ui-block-art__content { position: relative; z-index: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.ui-root .ui-block-art__visual { position: relative; z-index: 0; min-inline-size: 0; max-inline-size: 100%; pointer-events: none; user-select: none; }
.ui-root .ui-block-art__visual[hidden] { display: none; }
.ui-root .ui-block-art__image { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; pointer-events: none; }
.ui-root .ui-block-art--trailing { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.ui-root .ui-block-art--trailing > .ui-block-art__content { flex: 1 1 12em; }
.ui-root .ui-block-art--trailing > .ui-block-art__visual { flex: 0 0 var(--ui-block-art-size); inline-size: var(--ui-block-art-size); margin-inline-start: auto; }
.ui-root .ui-block-art--scene { display: grid; gap: .75rem; }
.ui-root .ui-block-art--scene > .ui-block-art__visual { grid-row: 1; inline-size: 100%; }
@media (forced-colors: active) {
  .ui-root .ui-block-art[data-art-kind="decoration"] > .ui-block-art__visual { display: none; }
  .ui-root .ui-block-art { color: CanvasText; }
}