/* The practice screen: video, challenge timer. */
@layer components {
  [data-theme] {
    .video-frame {
      position: relative;
      display: grid;
      place-items: center;
      overflow: hidden;
      min-height: 10rem;
      border-radius: var(--radius-card);
      background: #10151a;
      color: #ffffff;

      :where(video) {
        width: 100%;
        max-height: 70dvh;
      }
    }

    .prose {
      display: grid;
      gap: var(--space-3);
    }

    .timer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-5);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-card);
      background: var(--color-surface);
      box-shadow: var(--shadow-card);
      text-align: center;
    }

    .timer__remaining {
      max-width: none;
      color: var(--color-brand);
      font-family: var(--font-display);
      font-size: var(--text-3xl);
      font-variant-numeric: tabular-nums;
      font-weight: var(--weight-display);
      line-height: var(--leading-tight);

      &:empty {
        display: none;
      }
    }

    .timer__status {
      color: var(--color-text-muted);
    }

    .timer__controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-3);
    }
  }
}