/**
 * RelationField — widget for `type: 'relation'` fields.
 *
 * Override handles:
 *   .byline-field-relation               — outer wrapper
 *   .byline-field-relation-header        — label row
 *   .byline-field-relation-frame         — rounded border around the interactive body
 *   .byline-field-relation-error-tile    — wrapper shown when target collection is unknown
 *   .byline-field-relation-error-text    — secondary error message below the title
 *   .byline-field-relation-tile          — bordered selected-value + actions container
 *   .byline-field-relation-actions       — top-right icon-button group (edit + remove)
 *   .byline-field-relation-mono          — monospace `<code>` for field/collection names
 *
 * Help text renders BELOW the frame via the ui-kit `HelpText` component
 * (mirroring composite inputs like the partial-date widget), so there is no
 * relation-specific help class.
 */

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

.error-tile,
:global(.byline-field-relation-error-tile) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding: var(--spacing-8);
  border: var(--border-width-thin) var(--border-style-solid) var(--red-700);
  background-color: oklch(from var(--red-900) l c h / 0.2);
  border-radius: var(--border-radius-md);
  color: var(--red-200);
  font-size: var(--font-size-xs);
}

.error-text,
:global(.byline-field-relation-error-text) {
  color: oklch(from var(--red-400) l c h / 0.8);
}

.tile,
:global(.byline-field-relation-tile) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-8);
  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);
  color: var(--gray-200);
  font-size: var(--font-size-xs);
}

.actions,
:global(.byline-field-relation-actions) {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-shrink: 0;
}

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

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

.mono,
:global(.byline-field-relation-mono) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
 * hasMany — ordered list of relation tiles with drag-reorder + remove.
 *
 * Override handles:
 *   .byline-field-relation-many        — vertical list of tiles
 *   .byline-field-relation-many-empty  — empty-state hint
 *   .byline-field-relation-many-tile   — one row: grip + summary + remove
 *   .byline-field-relation-many-grip   — drag handle
 *   .byline-field-relation-many-body   — flexible summary cell
 *   .byline-field-relation-many-add    — add-item button row
 * --------------------------------------------------------------------------- */

.many,
:global(.byline-field-relation-many) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-top: 0.25rem;
}

.many-empty,
:global(.byline-field-relation-many-empty) {
  margin: 0.25rem 0;
  color: var(--gray-400);
  font-size: var(--font-size-xs);
}

.many-tile,
:global(.byline-field-relation-many-tile) {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-8);
  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
  border-radius: var(--border-radius-md);
  background-color: var(--surface-100, transparent);
  color: var(--gray-200);
  font-size: var(--font-size-xs);
}

.many-tile-dragging,
:global(.byline-field-relation-many-tile-dragging) {
  opacity: 0.85;
  box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.2));
}

.many-grip,
:global(.byline-field-relation-many-grip) {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--gray-400);
  cursor: grab;
  touch-action: none;
}

.many-grip:active,
:global(.byline-field-relation-many-grip:active) {
  cursor: grabbing;
}

.many-body,
:global(.byline-field-relation-many-body) {
  flex: 1 1 auto;
  min-width: 0;
}

.many-remove,
:global(.byline-field-relation-many-remove) {
  flex-shrink: 0;
}

.many-add,
:global(.byline-field-relation-many-add) {
  display: flex;
  margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * Frame — rounded border around the field's interactive body (tiles and/or
 * buttons), rendered BELOW the label / help text, mirroring the framing
 * convention of composite inputs like the partial-date widget. Bordered with
 * `--field-border`, the same theme-aware token the Input / Select widgets
 * use, so it matches them and flips automatically between light and dark.
 *
 * Override handle:
 *   .byline-field-relation-frame — the framing box
 * --------------------------------------------------------------------------- */

.frame,
:global(.byline-field-relation-frame) {
  margin-top: 0.25rem;
  border: var(--border-width-thin) var(--border-style-solid) var(--field-border);
  border-radius: var(--border-radius-md, 6px);
  padding: 0.5rem;
}

/* The frame now supplies the label → content separation, so zero the legacy
   top margins on children rendered inside it. */
.frame > .tile,
.frame > .many,
:global(.byline-field-relation-frame > .byline-field-relation-tile),
:global(.byline-field-relation-frame > .byline-field-relation-many) {
  margin-top: 0;
}

.frame > .many-empty,
:global(.byline-field-relation-frame > .byline-field-relation-many-empty) {
  margin-top: 0;
}