/**
 * ImageField — image preview + metadata + remove/upload affordances.
 *
 * Override handles:
 *   .byline-field-image                — wrapper div
 *   .byline-field-image-header         — label row
 *   .byline-field-image-remove         — remove-button (icon, top-right of tile)
 *   .byline-field-image-empty          — empty-state hint text
 *   .byline-field-image-tile           — bordered preview/metadata tile
 *   .byline-field-image-preview-wrap   — preview-image positioned wrapper
 *   .byline-field-image-preview        — the <img> preview
 *   .byline-field-image-preview-svg    — preview sized for SVG aspect
 *   .byline-field-image-pending        — yellow "pending upload" pill
 *   .byline-field-image-meta           — metadata list
 *   .byline-field-image-meta-key       — metadata field-name span
 *   .byline-field-image-meta-pending   — yellow text inside pending status
 */

.header,
:global(.byline-field-image-header) {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  margin-bottom: 0.25rem;
}

.remove,
:global(.byline-field-image-remove) {
  position: absolute;
  top: var(--spacing-6);
  right: var(--spacing-6);
  z-index: 1;
}

:global(.byline-field-image-remove .byline-button) {
  color: var(--gray-900);
}

:global(.dark .byline-field-image-remove .byline-button),
:global([data-theme="dark"] .byline-field-image-remove .byline-button) {
  color: var(--gray-200);
}

.empty,
:global(.byline-field-image-empty) {
  color: var(--gray-500);
  font-size: var(--font-size-xs);
  font-style: italic;
}

.tile,
:global(.byline-field-image-tile) {
  position: relative;
  display: flex;
  gap: var(--spacing-16);
  margin-top: 0.25rem;
  padding: var(--spacing-8);
  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
  border-radius: var(--border-radius-md);
}

.preview-wrap,
:global(.byline-field-image-preview-wrap) {
  position: relative;
}

.preview-button,
:global(.byline-field-image-preview-button) {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: block;
  cursor: pointer;
  border-radius: var(--border-radius-sm);
}

.preview-button:focus-visible,
:global(.byline-field-image-preview-button):focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.preview-button img,
:global(.byline-field-image-preview-button) img {
  transition: opacity 120ms ease;
}

.preview-button:hover img,
:global(.byline-field-image-preview-button):hover img {
  opacity: 0.85;
}

.preview,
:global(.byline-field-image-preview) {
  max-height: 10rem;
  min-height: 4rem;
  min-width: 4rem;
  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
  border-radius: var(--border-radius-sm);
  object-fit: contain;
}

.preview-svg,
:global(.byline-field-image-preview-svg) {
  width: 271px;
  height: 159px;
  max-height: none;
}

.pending,
:global(.byline-field-image-pending) {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  padding: 0.125rem 0.375rem;
  background-color: oklch(from var(--yellow-600) l c h / 0.9);
  color: var(--yellow-100);
  font-size: 0.6rem;
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-sm);
}

.uploading,
:global(.byline-field-image-uploading) {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: oklch(from var(--gray-950) l c h / 0.5);
  border-radius: var(--border-radius-md);
}

.meta,
:global(.byline-field-image-meta) {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-right: var(--spacing-32);
  color: var(--gray-200);
  font-size: var(--font-size-xs);
}

.meta-key,
:global(.byline-field-image-meta-key) {
  font-weight: var(--font-weight-semibold);
}

.meta-pending,
:global(.byline-field-image-meta-pending) {
  color: var(--yellow-400);
}