/* Shared upload appearance. Layout and event handlers
 * stay with each component. New upload surfaces should use data-ui-upload.
 * The contract layer prevents lazy route styles and filled/hover states from
 * restoring old borders or radii. It deliberately excludes result galleries,
 * image viewers, crop canvases and delete/status controls.
 */
@layer pika-upload-surfaces {
  :root {
    --upload-radius: 8px;
    --upload-surface: #f1f2ee;
    --upload-ink: #62695f;
  }

  /* Give the resource-wall entry a little more contrast against the page. */
  body .resources-page .rl-grid > .rl-upload {
    --upload-surface: #e6e8e2;
  }

  body :is(.iw-workbench, .iw-dialog) {
    --material-upload-radius: var(--upload-radius) !important;
    --material-upload-corner: 2.343px !important;
  }

  /* Empty and filled upload targets, including compact composer stacks. */
  body :is(
    [data-ui-upload],
    .vw-endpoint-image, .vw-frame-image,
    .iw-product-slot > .iw-tile, .iw-tile-main, .iw-case-upload,
    .iw-stack.is-empty, .iw-mini-stack.is-empty, .iw-stack-media-placeholder,
    .icm-add, .icm-preview, .ipm-upload-tile, .ipm-media-preview,
    .pa-slot .pa-cover, .pa-upload,
    .rl-upload, .rl-upload-slots > button,
    .va-views .va-empty, .va-views > article > img,
    .upload-card, .case-upload-box, .cd-framing-viewport,
    .model-cover-upload, .avatar-picker .member-avatar,
    .profile-avatar-trigger, .profile-avatar-trigger .profile-avatar-large,
    .render-layer-upload
  ) {
    border: 0 !important;
    border-radius: var(--upload-radius) !important;
    background: var(--upload-surface) !important;
    color: var(--upload-ink) !important;
    box-shadow: none !important;
  }

  /* Structural shells must not clip the external remove buttons. */
  body :is(.iw-reference-grid > .iw-tile, .vw-endpoint-card, .icm-tile, .ipm-media-surface) {
    border: 0 !important;
    border-radius: var(--upload-radius) !important;
    box-shadow: none !important;
  }

  /* Actual media and clipping surfaces use the exact same radius after upload.
   * Do not apply to all descendants: remove buttons keep their circular shape.
   */
  body :is(
    [data-ui-upload] > img, [data-ui-upload] > video,
    .vw-endpoint-image img, .vw-frame-image img, .vw-endpoint-pending,
    .vw-endpoint-preview, .vw-endpoint-preview img,
    .vw-media-tile > video, .vw-media-tile > audio,
    .iw-tile-main img, .iw-stack > img, .iw-mini-stack > img,
    .icm-preview img, .icm-preview video, .ipm-media-preview img, .ipm-media-preview video,
    .pa-slot .pa-cover img, .rl-upload-slots img,
    .upload-card img, .cd-framing-viewport,
    .model-cover-upload .model-cover,
    .avatar-picker .member-avatar img, .profile-avatar-trigger img,
    .ds-evidence-items img, .ds-evidence-items video, .qb-image img
  ) {
    border: 0 !important;
    border-radius: var(--upload-radius) !important;
  }
  body :is(.iw-stack > img, .iw-mini-stack > img, .model-cover-upload .model-cover) {
    box-shadow: none !important;
  }
  body :is(.vw-endpoint-pending, .vw-media-tile > video, .vw-media-tile > audio,
    .ds-evidence-items img, .ds-evidence-items video, .qb-image img) {
    background: var(--upload-surface) !important;
    color: var(--upload-ink) !important;
  }
  body .vw-media-tile > video { background: transparent !important; }
  body :is(.vw-endpoint-image, .vw-frame-image, .iw-tile-main, .icm-preview,
    .ipm-media-preview, .rl-upload-slots > button, .model-cover-upload) {
    overflow: hidden;
  }

  /* Embedded copy inherits the same gray, without changing type or icon sizes. */
  body :is(
    .vw-endpoint-empty, .vw-frame-image > small, .iw-stack-empty,
    .iw-tile-main > span, .iw-tile-main small,
    .pa-upload > span, .rl-upload > span, .rl-upload-slots > button > strong,
    .rl-upload-slots > button > small, .rl-upload-slots > button > span,
    .upload-card > strong, .upload-card > small, .upload-card .plus,
    .case-upload-box > strong, .case-upload-box > small,
    .cd-framing-upload:not(.has-image)
  ) { color: var(--upload-ink) !important; }
  body .iw-tile-main > span { background: var(--upload-surface) !important; }
  body :is(.upload-card .plus, .case-upload-box > svg) { border: 0 !important; }

  /* Uploaded media has no placeholder backing, including on hover. Keep the
   * hit area stable, but round the image's intrinsic box, not letterboxing. */
  body :is(
    [data-ui-upload], .vw-endpoint-image, .vw-endpoint-card, .vw-frame-image,
    .iw-product-slot > .iw-tile, .iw-reference-grid > .iw-tile, .iw-tile-main,
    .icm-tile, .icm-preview, .ipm-media-surface, .ipm-media-preview,
    .pa-slot .pa-cover, .rl-upload-slots > button, .upload-card,
    .case-upload-box, .model-cover-upload, .avatar-picker .member-avatar,
    .profile-avatar-trigger, .profile-avatar-large, .vw-endpoint-preview
  ):has(img, video) { background: transparent !important; }
  body .iw-tile-main:has(img) > span { background: transparent !important; }

  body :is([data-ui-upload], .vw-endpoint-image, .vw-frame-image,
    .iw-tile-main, .icm-preview, .ipm-media-preview, .pa-slot .pa-cover,
    .vw-endpoint-preview):has(img, video) {
    display: grid !important;
    place-items: center !important;
    grid-template-rows: minmax(0, 1fr);
  }
  body :is(
    [data-ui-upload] > img, [data-ui-upload] > video,
    .vw-endpoint-image img, .vw-frame-image img, .vw-endpoint-preview img,
    .iw-tile-main img, .icm-preview img, .ipm-media-preview img,
    .ipm-media-preview video, .pa-slot .pa-cover img,
    .rl-upload-slots img, .upload-card img,
    .avatar-picker .member-avatar img, .profile-avatar-trigger img,
    .ds-evidence-items img, .ds-evidence-items video, .qb-image img
  ) {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    margin: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body .vw-endpoint-image > .ds-hint-icon {
    display: grid;
    place-items: center;
    grid-template-rows: minmax(0, 1fr);
  }
  body .rl-upload-slots > button:has(img) { padding: 0 !important; }
  :root body .rl-upload-slots img { flex: none !important; max-height: 100px !important; }
  :root body .rl-upload-slots:is(.is-scene, :has(> button:only-child)) img { max-height: 180px !important; }
  :root body .rl-upload-slots > button[data-preview-only=true] img { max-height: 100% !important; }
  :root body .ds-evidence-items :is(img, video) { max-height: 100px !important; }

  /* Native file pickers used in administration and render forms. Hidden file
   * inputs and transparent overlaid inputs retain their existing behaviour. */
  body input[type="file"]::file-selector-button {
    border: 0;
    border-radius: var(--upload-radius);
    background: var(--upload-surface);
    color: var(--upload-ink);
    padding: 10px 14px;
    font: inherit;
    cursor: pointer;
  }

  /* No decorative border; keyboard navigation still has a visible focus cue. */
  body :is([data-ui-upload], .vw-endpoint-image, .vw-frame-image, .iw-tile-main,
    .icm-add, .icm-preview, .ipm-upload-tile, .ipm-media-preview,
    .rl-upload, .rl-upload-slots > button, .model-cover-upload):focus-visible {
    outline: 2px solid var(--upload-ink);
    outline-offset: 3px;
  }
}