/* Picture upload tiles extend the existing input and preview components. */
.editor-media{margin-top:var(--space-20)}
.editor-media-field+.editor-media-field{margin-top:var(--space-24)}
.editor-media-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12)}
.editor-media-heading label{margin:0;color:var(--ink-2);font-size:var(--font-size-small)}
.editor-media-count{color:var(--ink-muted-readable);font-size:var(--font-size-caption);font-variant-numeric:tabular-nums;white-space:nowrap}
.editor-media-hint{color:var(--ink-2);font-size:var(--font-size-hint);margin:var(--space-4) 0 var(--space-12)}
.editor-media input[hidden]{display:none}
.editor-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(calc(var(--cover-height) + var(--space-20)),100%),1fr));gap:var(--space-12);align-items:start}
.editor-media-single{grid-template-columns:minmax(0,1fr);width:calc(var(--cover-height) * 2);max-width:100%}
.editor-media .editor-media-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);width:100%;min-height:var(--cover-height);padding:var(--space-18) var(--space-12);border:var(--border-width) dashed var(--line);border-radius:var(--radius-input);background:var(--bg);color:var(--brand);font-family:inherit;line-height:var(--line-height-body);font-size:var(--font-size-small);transition:background var(--motion-duration) var(--motion-easing),border-color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing)}
.editor-media-single .editor-media-add{aspect-ratio:16/9}
.editor-media-add>.ui-icon{width:var(--space-28);height:var(--space-28);margin-bottom:var(--space-4)}
.editor-media-add>span{font-weight:var(--font-weight-semibold)}
.editor-media-add>small{font-size:var(--font-size-hint);font-weight:var(--font-weight-regular);color:var(--ink-2)}
.editor-media-add:hover:not(:disabled),.is-dragging .editor-media-add{border-color:var(--brand);background:var(--brand-soft)}
.editor-media-add:active:not(:disabled){transform:translateY(var(--press-offset))}
.editor-media .editor-media-add:disabled{color:var(--ink-3);background:var(--bg);cursor:not-allowed;transform:none}
.editor-media .editor-media-add:disabled>small{color:var(--ink-2)}
.editor-media-field.has-error .editor-media-add{border-color:var(--red)}
.editor-media-field.has-error .editor-media-preview{border-color:var(--red)}
.editor-media-field.is-dragging .editor-media-grid{outline:var(--focus-width) solid var(--brand);outline-offset:var(--focus-offset);border-radius:var(--radius-input)}
.editor-media-preview{min-width:0;border:var(--border-width) solid var(--line);border-radius:var(--radius-input);background:var(--card);overflow:hidden}
.editor-media-art{position:relative;aspect-ratio:4/3;background:var(--bg)}
.editor-media-single .editor-media-art{aspect-ratio:16/9}
.editor-media-art>img,.editor-media-art>video{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.editor-media-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--space-10);color:var(--ink-2);font-size:var(--font-size-caption);background:var(--bg);pointer-events:none}
.editor-media-name{font-size:var(--font-size-caption);color:var(--ink-2);padding:var(--space-8) var(--space-10) 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor-media-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-6);padding:0 var(--space-6)}
.editor-media .editor-media-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--space-4) var(--space-8);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--brand);font-size:var(--font-size-card-link);line-height:var(--line-height-body)}
.editor-media-actions button:hover:not(:disabled){background:var(--brand-soft)}
.editor-media .editor-media-actions button[data-media-remove]{color:var(--red-ink)}
.editor-media .editor-media-actions button:disabled{color:var(--ink-3);cursor:not-allowed}
.editor-media-status{margin-top:var(--space-6);font-size:var(--font-size-caption);color:var(--green-ink);overflow-wrap:anywhere}
.editor-media-status:empty{display:none}
.editor-media-status.is-error{color:var(--red-ink)}
.editor-media-field[aria-busy=true] .editor-media-status{color:var(--ink-2)}
@media(max-width:640px){.editor-media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10)}.editor-media-single{grid-template-columns:minmax(0,1fr);width:100%}.editor-media .editor-media-add{padding:var(--space-14) var(--space-8)}.editor-media-add>small{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.editor-media-add:active:not(:disabled){transform:none}}