/* Media references share the site's existing palette and form dimensions. */
.ui-media-refs { min-width: 0; margin-top: 16px; color: var(--text); }
.ui-ref-header, .ui-ref-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-ref-title { font-size: 12px; font-weight: 600; }
.ui-ref-count, .ui-ref-hint, .ui-ref-tag { font-size: 12px; color: var(--muted); }
.ui-ref-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-ref-hint { margin: 4px 0 8px; line-height: 1.6; overflow-wrap: anywhere; }
.ui-ref-list { display: grid; gap: 8px; min-width: 0; margin-bottom: 8px; }
.ui-ref-list-video { grid-template-columns: repeat(auto-fit, minmax(min(100%, 156px), 1fr)); }
.ui-ref-item { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--field-bg); }
.ui-ref-item-head { margin-bottom: 6px; min-height: 32px; }
.ui-ref-remove { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.ui-ref-player { display: block; width: 100%; min-width: 0; max-width: 100%; }
video.ui-ref-player { aspect-ratio: 16 / 9; border-radius: 6px; object-fit: contain; background: var(--bg); }
audio.ui-ref-player { height: 36px; }
.ui-ref-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--field-bg); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.ui-ref-plus { font-size: 20px; line-height: 1; }
.ui-ref-add, .ui-ref-remove { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.ui-ref-add:disabled, .ui-ref-remove:disabled { opacity: .55; cursor: not-allowed; }
.ui-ref-add:focus-visible, .ui-ref-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-ref-spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: ui-ref-spin 800ms linear infinite; }
html:not([data-mode="light"]) .ui-ref-player { color-scheme: dark; }
html[data-mode="light"] .ui-ref-player { color-scheme: light; }
#durWrap > .glide-trigger { flex: 1; width: auto; min-width: 0; }
@media (hover: hover) {
  .ui-ref-add:not(:disabled):hover, .ui-ref-remove:not(:disabled):hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
}
@media (pointer: coarse) { .ui-ref-remove { flex-basis: 44px; width: 44px; height: 44px; } }
@keyframes ui-ref-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-ref-spinner { animation: none; } .ui-ref-add, .ui-ref-remove { transition: none; } }