@layer components {
  /* Table wrapper */
  .captions-wrapper {
    background: var(--color-canvas);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-block-end: calc(var(--block-space) * 2);
  }

  /* Table component */
  .captions-table {
    inline-size: 100%;
    border-collapse: collapse;

    thead {
      background: oklch(26% 0.05 264);
      color: white;

      @media (prefers-color-scheme: dark) {
        background: oklch(30% 0.05 264);
      }
    }

    th {
      padding-block: 0.75em;
      padding-inline: 1.25em;
      text-align: start;
      font-weight: 600;
      font-size: var(--text-small);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    tbody tr {
      border-block-end: 1px solid var(--color-border);
      transition: background-color var(--transition-fast);

      &:hover {
        background-color: color-mix(in srgb, var(--color-info) 5%, transparent);
      }

      &:nth-child(odd) {
        background-color: color-mix(in srgb, var(--color-ink) 2%, transparent);

        &:hover {
          background-color: color-mix(in srgb, var(--color-info) 5%, transparent);
        }
      }
    }

    td {
      padding-block: 0.75em;
      padding-inline: 1.25em;
      vertical-align: middle;
    }

    td.actions {
      display: flex;
      align-items: center;
      gap: var(--inline-space-half);
      white-space: nowrap;
    }

    /* Responsive table */
    @media (max-width: 768px) {
      font-size: var(--text-small);

      th, td {
        padding-block: 0.5em;
        padding-inline: 0.75em;
      }
    }
  }

  /* Timestamp column */
  .timestamp-column {
    inline-size: 130px;

    @media (max-width: 768px) {
      inline-size: auto;
    }
  }

  .timestamp {
    font-family: var(--font-mono);
    color: var(--color-ink-light);
    font-size: 0.85em;
  }

  .time-range {
    display: inline;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast);

    &:hover {
      color: var(--color-info-dark);
      text-decoration: underline;
    }
  }

  .start-time {
    color: var(--color-info);
    font-weight: 600;
  }

  /* Caption text */
  .caption-text {
    color: var(--color-ink);
    line-height: 1.5;
    font-size: var(--text-base);
  }

  /* Active caption row (during playback) */
  .captions-table tbody tr.active {
    background-color: color-mix(in srgb, var(--color-info) 8%, transparent);
    border-inline-start: 3px solid var(--color-info);

    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, var(--color-info) 15%, transparent);
    }

    .caption-text {
      font-weight: 500;
    }

    .timestamp {
      color: var(--color-info-dark);
      font-weight: 600;
    }
  }

}