/**
 * FileField — metadata tile + remove/upload affordances for arbitrary file
 * uploads (non-image). Mirrors `image-field.module.css` structurally; the
 * image-only preview / SVG-shape / pending-badge rules are dropped.
 *
 * Override handles:
 *   .byline-field-file                — wrapper div
 *   .byline-field-file-header         — label row
 *   .byline-field-file-actions        — top-right icon-button group (download + remove)
 *   .byline-field-file-empty          — empty-state hint text
 *   .byline-field-file-tile           — bordered metadata tile
 *   .byline-field-file-uploading      — centered overlay shown while uploading
 *   .byline-field-file-icon-wrap      — left-aligned document-icon wrapper
 *   .byline-field-file-icon           — the document glyph itself
 *   .byline-field-file-pending        — yellow "pending upload" pill
 *   .byline-field-file-meta           — metadata list
 *   .byline-field-file-meta-key       — metadata field-name span
 *   .byline-field-file-meta-pending   — yellow text inside pending status
 */

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

.actions,
:global(.byline-field-file-actions) {
  position: absolute;
  top: var(--spacing-6);
  right: var(--spacing-6);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

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

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

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

.tile,
:global(.byline-field-file-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);
}

.uploading,
:global(.byline-field-file-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);
}

.icon-wrap,
:global(.byline-field-file-icon-wrap) {
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: var(--border-width-thin) var(--border-style-solid) var(--gray-600);
  border-radius: var(--border-radius-sm);
  color: var(--gray-300);
}

/* Interactive affordance when the wrap is rendered as a link
   (file is stored — clicking opens the asset in a new tab). */
a.icon-wrap,
:global(a.byline-field-file-icon-wrap) {
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color 120ms ease,
    color 120ms ease;
}

a.icon-wrap:hover,
:global(a.byline-field-file-icon-wrap):hover {
  border-color: var(--primary-500);
  color: var(--primary-400);
}

a.icon-wrap:focus-visible,
:global(a.byline-field-file-icon-wrap):focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.icon,
:global(.byline-field-file-icon) {
  opacity: 0.85;
}

.pending,
:global(.byline-field-file-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);
}

.meta,
:global(.byline-field-file-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-file-meta-key) {
  font-weight: var(--font-weight-semibold);
}

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