/* FND-1088 PR 2 — the media tile (dashboard_media_tile.jsx). Content-free (Peter 14.10.): the medium fills the whole square; the title is
   a caption layer of the multimedia tile (PR 8, dashboard_layers.css); no counter, no arrow. The picture / video box comes from dashCropBox (PR 1, .dash-tile-bg: black
   bars or the tile colour); the YouTube player always fills the WHOLE square and nothing is drawn over it (YouTube RMF). */
.dash-media { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; isolation: isolate; }
.dash-media-stage { position: absolute; inset: 0; }
.dash-media-video { position: absolute; display: block; max-width: none; max-height: none; object-fit: fill; -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* Loading / error face — on the tile colour, never an empty square (C8). */
.dash-media-state {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px;
  text-align: center; color: var(--tile-muted); font-size: 12px; line-height: 1.35;
}
.dash-media-state.is-error { color: var(--tile-text); }
.dash-media-state-text { max-width: 26ch; }

/* Pause / play (WCAG 2.2.2) — bottom right, keyboard reachable, the solid tile colour. */
.dash-media-pp {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 999px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--tile-bg-a); color: var(--tile-text);
  box-shadow: 0 0 0 1px var(--tile-edge);
}
.dash-media-pp:focus-visible, .dash-media-cover-play:focus-visible, .dash-media-yt-btn:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.is-s .dash-media-pp { right: 5px; bottom: 5px; width: 22px; height: 22px; }
.dash-grid-edit .dash-media-pp { right: 36px; }
/* A capped (> 4 running) or browser-blocked video: its first frame + a large play button. */
.dash-media-cover-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 48px; height: 48px; border-radius: 999px; border: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tile-bg-a) 88%, transparent); color: var(--tile-text); box-shadow: 0 0 0 1px var(--tile-edge);
}
.is-s .dash-media-cover-play { width: 34px; height: 34px; }

/* YouTube: neutral placeholder (no request to Google before consent) and the live player over the whole square. */
.dash-media-yt-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 14px;
  text-align: center; color: var(--tile-text);
}
.dash-media-yt-ico { color: var(--tile-text); opacity: .9; }
.dash-media-yt-head { font-family: var(--ad-font-display); font-weight: 700; font-size: 14px; }
.dash-media-yt-text { font-size: 11.5px; line-height: 1.35; color: var(--tile-muted); max-width: 30ch; }
.dash-media-yt-ph.is-s { gap: 4px; padding: 8px; }
.dash-media-yt-ph.is-s .dash-media-yt-text { font-size: 10.5px; color: var(--tile-text); }
.dash-media-yt-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px; }
.dash-media-yt-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 8px; cursor: pointer; font-family: var(--ad-font-body);
  font-weight: 700; font-size: 11.5px; border: 1px solid var(--tile-ring); background: transparent; color: var(--tile-text);
}
.dash-media-yt-btn.is-primary { background: var(--tile-text); color: var(--tile-bg-a); border-color: var(--tile-text); }
.dash-media-yt { position: absolute; inset: 0; background: #000; }
.dash-media-yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* FND-1132: the player never takes the press of a tile — grab, move and click land on the tile (shield + pointer-events: none). Only
   „Player bedienen“ (.is-use, an explicit click / Enter) hands the pointer to the player; edit mode never does. */
.dash-media-yt-frame { pointer-events: none; }
.dash-grid-edit .dash-media-yt-frame { pointer-events: none; }
.dash-media-yt.is-use .dash-media-yt-frame { pointer-events: auto; }
.dash-grid-edit .dash-media-yt.is-use .dash-media-yt-frame { pointer-events: none; }
.dash-media-yt-shield { position: absolute; inset: 0; z-index: 1; background: transparent; }
.dash-media-yt-use {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 999px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--tile-bg-a); color: var(--tile-text);
  box-shadow: 0 0 0 1px var(--tile-edge); opacity: .85;
}
.dash-media-yt-use[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--ad-accent); }
.dash-media-yt-use:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
/* FND-1132: while a tile is dragged (.dash-grid-parked, set synchronously on dragstart) every video / player is hidden and paused and a
   plain square in the tile colour stands in — the browser moves cheap layers only; the drop restores the very same elements. */
.dash-media-park { display: none; }
.dash-grid-parked .dash-media-park {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  background: var(--tile-bg-a); color: var(--tile-text);
}
.dash-grid-parked .dash-media-yt-frame, .dash-grid-parked .dash-media-video { visibility: hidden; }
.dash-grid-parked .dash-media-yt-use, .dash-grid-parked .dash-media-pp, .dash-grid-parked .dash-media-cover-play { visibility: hidden; }

@media (hover: none) { .dash-grid:not(.dash-grid-edit) .dash-tile:has(.dash-media-yt-frame) .dash-tile-more { opacity: 0; pointer-events: none; } }

/* Editor additions used by the canvas editor (dashboard_layer_editor.jsx; the rest is PR 1's .dash-te-*). */
.dash-media-progress { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.dash-media-progress > span { display: block; height: 100%; background: currentColor; transition: width 160ms; }
.dash-media-codec { font-size: 11.5px; color: var(--ad-text-subtle); }
.dash-media-yt-parse { font-size: 12px; color: var(--ad-text-muted); font-variant-numeric: tabular-nums; min-height: 1em; }
.dash-media-yt-parse[data-media-yt-parse="invalid"] { color: var(--ad-danger-fg); }
.dash-media-why { font-size: 11.5px; color: var(--ad-text-subtle); }