/*
 * THE TRANSPORT IS THE PLATFORM'S — this sheet only decides the box.
 *
 * A `<video>` is a REPLACED element: once metadata loads it reports the source's
 * intrinsic size as its content size, and any ancestor sized by its content
 * grows to match — a 1280x720 capture measurably widened a 342px chat column to
 * 367px the moment it loaded. Taking the media OUT OF FLOW is what makes
 * filling safe, and it lives here rather than in each caller because a caller
 * cannot see the intrinsic size that causes it. The root carries the
 * positioning context so the media cannot escape to some unrelated ancestor.
 *
 * Audio stays IN flow, where its intrinsic control height is exactly what the
 * caller asked for.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-media-player[data-kind="video"] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* FLEX, not block. An `<audio controls>` is an inline-level replaced element,
     so a block root gives it a line box and four pixels of half-leading under
     the transport; a flex container blockifies its children and there is none. */
  .lotics-media-player[data-kind="audio"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* A failed audio player has no frame of its own to fill, so the root takes the
     notice's place in the caller's flow the way the bare notice used to. */
  .lotics-media-player[data-kind="audio"][data-failed] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  .lotics-media-player[data-kind="video"] .lotics-media-player__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* Letterbox rather than crop or stretch: a screen capture is evidence, and
       a cropped one silently hides part of what was on screen. */
    object-fit: contain;
    background-color: var(--lotics-black);
  }

  .lotics-media-player[data-kind="audio"] .lotics-media-player__media {
    width: 100%;
  }

  .lotics-media-player__notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-8);
    padding: var(--lotics-space-16);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    background-color: var(--muted);
    --lotics-icon-color: var(--lotics-ink-inactive);
  }
}